Hierarchy display in CSS

Question

I'm having trouble coming up with CSS for a hierarchical display, like a tree of files and folders. I use nested unordered lists:

<ul>
  <li>animals<ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>

They display nicely with the proper CSS minus the connecting lines. I need the lines to connect. I do this with the following CSS:

ul ul li:before {
  content: "";
  padding: 15px;
  border: 1px solid #000;
  border-width: 0 0 1px 1px;
  border-radius: 0 0 0 10px;
  position: absolute;
  left: -22px;
  top: -15px;
}

Problem is the lines overlap the icons for the animals, dogs and cats. I tried changing z-index's to no effect. Is there a better way to achieve this with CSS? Or is there another way to get the z-index making sense?

Answer 1

Check out this example. You could easily replace the salmon colored box with images:

HTML

<div>
    <h3>Root</h3>
    <ul>        
      <li>Folder 1
        <ul>
            <li>Folder 2
                <ul>
                    <li>file1.xml</li>
                    <li>file2.xml</li>
                    <li>file3.xml</li>
                </ul>
            </li>
            <li>file.html</li>
          </ul>
      </li>
      <li>file.psd</li>
      <li>file.cpp</li>
    </ul>
</div>

CSS

body {
    margin: 20px;
    line-height: 3;
    font-family: sans-serif;

}

div {
    position: relative;
}

ul {
    text-indent: .5em;
    border-left: .25em solid gray;
}

ul ul {
    margin-top: -1.25em;
    margin-left: 1em;

}

li {
    position: relative;
    bottom: -1.25em;
}

li:before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 0;
    position: relative;
    left: -.75em;
    border-top: .25em solid gray;
}

ul ul:before, h3:before, li:after {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    background: salmon;
    border: .25em solid white;
    top: 1em;
    left: .4em;
}

h3 {
    position: absolute;
    top: -1em;
    left: 1.75em;
}

h3:before {
    left: -2.25em;
    top: .5em;
}

Demo

Answer 2

jsFiddle Demo

There's a great dated online tutorial that does exactly what your looking for.

It used images to create unique bullets but in your case you can use pipe (i.e., | ) symbol and specify a larger font-size with desired color.

Screenshot:

EDIT:

Here is an extra jsFiddle duplicating your curved connecting lines.

jsFiddle Demo 2

EDIT 2:

Here is a final revised jsFiddle revision that adds an escaped space to have better viewability while maintaining your curvy connections.

jsFiddle Demo 3 and 3b

EDIT 3: This particular blank space variety is an option to use for content property in the demo above:

Entity  Name Symbol/Description
      en space

To be sure, the special blank space is the middle of the 3 blank spaced under Symbol. Using that requires no use of alternate character plus transparency to simulate blank space. Dropping transparency property means IE8 is happy. Just in case, the empty line below contains 1 single special blank space character. Copy to the clipboard to use, as Entity and Name do not work:
 

EDIT 4: Alternate for Edit 3 is to check out SO Answers provided for Adding HTML entities using CSS content.

Answer 3

If you want a simplistic example, here we go:

HTML

<ul>
  <li>animals
   <ul>
    <li>dogs</li>
    <li>cats</li>
  </ul></li>
</ul>​

CSS

li {
  border-left: 1px solid #000;
  margin-left: 10px;
  margin-top: 5px;
  padding-left: 10px;
}​

See jsFiddle result