CSS to create a simple tree structure with connecting lines. No images or JS required.

tree.css

   ul.tree, ul.tree ul {
    list-style: none;
     margin: 0;
     padding: 0;
   } 
   ul.tree ul {
     margin-left: 10px;
   }
   ul.tree li {
     margin: 0;
     padding: 0 7px;
     line-height: 20px;
     color: #369;
     font-weight: bold;
     border-left:1px solid rgb(100,100,100);

   }
   ul.tree li:last-child {
       border-left:none;
   }
   ul.tree li:before {
      position:relative;
      top:-0.3em;
      height:1em;
      width:12px;
      color:white;
      border-bottom:1px solid rgb(100,100,100);
      content:"";
      display:inline-block;
      left:-7px;
   }
   ul.tree li:last-child:before {
      border-left:1px solid rgb(100,100,100);   
   }

tree.html

<ul class="tree">
    <li>Animals
     <ul>
      <li>Birds</li>
      <li>Mammals
       <ul>
        <li>Elephant</li>
        <li class="last">Mouse</li>
       </ul>
      </li>
      <li class="last">Reptiles</li>
     </ul>
    </li>
    <li class="last">Plants
     <ul>
      <li>Flowers
       <ul>
        <li>Rose</li>
        <li class="last">Tulip</li>
       </ul>
      </li>
      <li class="last">Trees</li>
     </ul>
    </li>
   </ul>

Cool, thanks. Demo is here, https://jsfiddle.net/1fynun7a/1/. I believe the last classes are not needed.

Great ! Thanks for sharing :)

is there a modifier to make the lines dotted? thanks!

Is there anyway to form a tree dynamically without using the lists i.e, li,ul?

Thank You for the awesome Codes.

Simplified a bit, geometry adjusted, font size independent and works with a root node.
https://jsfiddle.net/1fynun7a/1591/
(The body font-size is only so you can play with it and see that it scales properly.)
(You could make dotted by changing "solid" to "dotted" but piecemeal dotted borders often run into sync problems.)

Hi, how can I return the selected item of the css tree to use as input to a database (I need to know only how to retrieve 1 item)

Took @RenateUSB solution and made it work with multiline items: https://jsfiddle.net/tomaskafka/ur1hvzy3/

right to left (rtl):
دوستان فارسی زبان سی اس اس راست چین برای نمایش درختی
https://jsfiddle.net/ykp2com3/

This css rules allow for a root node without special <p> element:

ul.tree > li {
  border-left: none;
}

ul.tree > li:before {
  content: none;
}