Pure css tree with borders

Question

I am trying to create a tree with indentations in pure CSS. I have been trying using something like:

ul.tree ul {
  padding-left: 5px;
}

Ho

Answer 1

For lists with unknown depths, I've used an absolutely positioned element for separating lines. It adds a little extra markup, but seems to work.

div.separator {
    position:absolute;
    left:0px;
    right:0px;
    border-top:1px solid lightgray;
}

    
Item1

    
Item2

        

            
Item3

            
Item4

            
Item5

                

                    
Item6

                
            
        
    

http://jsfiddle.net/7u87c/20/