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?

`z-index` only works on elements that are position relative, absolute, or fixed. Make sure the thing you don't want to overlap is also relative or absolutely positioned. Also what do you mean by 'the lines to connect'. I also do not see any icons in your code. — bookcasey, Dec 26 '12 at 00:24
@bookcasey - I'll check the `position` attribute. Didn't include the CSS for the icons to simplify things, but they are `background-image`'s to the `li` elements. Just checked, the `li` element and the `:before` element have `position`s of `relative` and `absolute`, respectively, but z-index still did not work. — at., Dec 27 '12 at 00:06

score 24 · Answer 1 · answered Dec 26 '12 at 01:35

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

file structure with css example

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

Very nice, what I was looking for. There were certain situations that would cause the lines to stray, I forget which they were... I think if there was a folder followed by a file in a directory? I would've given you the credit, but the winner of this question gave me a nice clue to solve all situations. — at., Dec 27 '12 at 08:30
I really liked this example, but bootstrap was ruining it for me. So I created one that's bootstrap compatible, just requires a class in the div: http://jsfiddle.net/JEPtg/621/ — Chud37, Jul 31 '18 at 09:33

score 8 · Accepted Answer · edited May 23 '17 at 12:26

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
&#8194; &ensp;   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.

score 1 · Answer 3 · answered Dec 26 '12 at 00:36

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

Hierarchy display in CSS

3 Answers3

HTML

CSS

Demo

Linked