Programming
EN
1 min read
Build a Folder Tree in CSS for Nested Lists (No JavaScript Required)
It's just CSS

Learn how to create a folder tree structure in CSS with connected lines for nested lists. This step-by-step guide shows you how to style hierarchical lists using only CSS—no JavaScript needed!

960 x 540, 9.1 KB, JPG
You'll know how to do it in 3 mins.
html
<ul class="tree"> <li> <span>Parent Item</span> <ul> <li> <span>Child 1</span> <ul> <li><span>Child 1.1</span></li> <li> <ul> <li><span>Child 1.1.1</span></li> <li><span>Child 1.1.2</span></li> </ul> <span>Child 1.2</span> <ul> <li><span>Child 1.2.1</span></li> <li><span>Child 1.2.2</span></li> </ul> </li> </ul> </li> <li> <span>Child 2</span> <ul> <li><span>Child 2.1</span></li> </ul> </li> </ul> </li> <li> <span>Parent Item 2</span> <ul> <li> <span>Child 1</span> </li> <li><span>Child 2</span></li> </ul> </li> </ul>
css
.tree { list-style-type: none; padding-left: 20px; position: relative; } .tree li { position: relative; padding-left: 20px; } .tree li::before { content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 100%; border-left: 2px solid black; } .tree li span { position: relative; display: inline-block; padding: 5px; color: red; } .tree li span::before { content: ''; position: absolute; top: 50%; left: -20px; width: 20px; border-top: 2px solid black; } .tree ul { list-style-type: none; padding-left: 20px; position: relative; }
This will result as below:

269 x 393, 3.8 KB, PNG
You may try to twist the code to suit your need 😉
