Treeview with lines

by Khadeer Mohammed

HTML

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

CSS

body {
    font-size: 100%;
  }
  
  p.tree,
  ul.tree,
  ul.tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  ul.tree ul {
    margin-left: 1.0em;
  }

  ul.tree li {
    margin-left: 0.35em;
    border-left: thin solid #000;
  }

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

  ul.tree li:before {
    width: 0.9em;
    height: 0.6em;
    margin-right: 0.1em;
    vertical-align: top;
    border-bottom: thin solid #000;
    content: "";
    display: inline-block;
  }

  ul.tree li:last-child:before {
    border-left: thin solid #000;
  }