Skip to content

If CSS specifies content for ul>li:before, the content shows up in FancyTree #538

@maidentaiwan

Description

@maidentaiwan

FancyTree needs an additional rule in its CSS file, to protect itself from other CSS on the same web site:

ul.fancytree-container ul>li:before {
    content: none;
}

Otherwise, other CSS on your site can cause FancyTree to display unintentional content. For example, this CSS was on my web site and made FancyTree display several types of bullets:

ul ul {
  list-style-type: circle;
  list-style-image: none;
}
ul ul ul {
  list-style-type: square;
  list-style-image: none;
}
ul ul ul ul {
  list-style-image: none;
  list-style-type: none;
}
ul ul ul ul>li:before {
  content:"–"; /* This is an en dash, not a hyphen */
  margin-left: -20px;
}
ul ul ul ul ul {
  list-style-image: none;
  list-style-type: none;
}
ul ul ul ul ul>li:before {
  content:"»";
  margin-left: -20px;
}
ul ul ul ul ul ul {
  list-style-image: none;
  list-style-type: none;
}
ul ul ul ul ul ul>li:before {
  content:"•";
  margin-left: -20px;
}

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions