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

No extra markup and use of icon image.

Pretty simple and dynamic based on the content.

Sample HTML:

    
public
    
server.js
    

        server
        

            
webfs
        
    
    
specs
    

        src
        

            

                core
                

                    
CellAddress.js
                
            
        
     

CSS:

ul.tree {
  border-top: 1px solid grey;
}

ul.tree, ul.tree ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

ul span {
    display: block;
    padding-left: 25px;
    border-bottom: 1px solid #666;
    height: 25px;
    line-height: 25px;
    background: url("http://lorempixel.com/10/8/") no-repeat scroll 5px 8px transparent;
}

ul ul span {
    padding-left: 35px;
    background-position: 15px 8px; 
}

ul ul ul span {
    padding-left: 45px;
    background-position: 25px 8px;
}

Please see example

Note: You can convert the spans into a tags