Skip to content

Instantly share code, notes, and snippets.

@NekitoSP NekitoSP/tree.css forked from dylancwood/tree.css
Created Nov 15, 2019

Embed
What would you like to do?
CSS to create a simple tree structure with connecting lines. No images or JS required.
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);
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.