CSS Tree View with Lines

This CSS Tree View with Lines creates a structured layout to display hierarchical data. It organizes items in a parent-child format, making complex information easier to read. Each level connects with lines, which visually guide the flow of data. The style rules control spacing, alignment, and line rendering for a neat appearance. This approach is helpful for showing directories, categories, or nested lists in a clear format.

How to Create CSS Tree View With Lines

Create the HTML structure as follows:

<div class="tree">
  <ul>
    <li>11
      <ul>
        <li>21
          <ul>
            <li>31</li>
            <li>32</li>
            <li>33</li>
          </ul>
        </li>
        <li>22
          <ul>
            <li>31</li>
            <li>32</li>
            <li>33</li>
          </ul>
        </li>
        <li>23
          <ul>
            <li>31</li>
            <li>32</li>
            <li>33
              <ul>
                <li>41</li>
                <li>42</li>
                <li>43</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>12</li>
    <li>13</li>
  </ul>
</div>

Style using the following CSS styles:

.tree,
.tree ul,
.tree li{display:block;margin:0;padding:0;border:0;outline:0;text-decoration:none;text-align:left;text-align-last:left;color:#525252}

.tree ul:before,
.tree li:before,
.tree li:after{position:absolute;right:auto;content:'';-webkit-user-select:none}

.tree,
.tree ul:before,
.tree li:before{bottom:auto;font:0/0 sans-serif}

.tree ul,
.tree li{position:relative;font:16px/19px sans-serif;padding:0 0 16px}

.tree ul:before,
.tree li:after{background:#a6a6a6;}

.tree ul:before{width:8px;height:1px;top:0;left:6px}

.tree li{padding:0 0 0 28px;margin:0 0 0 9px;text-rendering:optimizeLegibility}

.tree li:before{
content:url('data:image/svg+xml;utf8,<svg width="5" height="5" viewBox="0 0 2 2" xmlns="http://www.w3.org/2000/svg"><circle cx="1" cy="1" r="1" fill="#a6a6a6"/><circle cy="1" cx="1" r="0.5" fill="#eaeaea"/></svg>');
background:transparent 0 2px repeat-x url('data:image/gif;base64,R0lGODlhAQABAPAAAKampgAAACwAAAAAAQABAAACAkQBADs=');
width:24px;top:7px;left:0;
text-align-last: right;
text-align: right;
height:5px;
}

.tree li:after{height:auto;width:1px;top:0;left:0;bottom:0}
.tree li:last-child:after{height:9px}

That’s all! hopefully, you have successfully created a tree view with lines. If you have any questions or suggestions, feel free to comment below.