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