Skip to content

Instantly share code, notes, and snippets.

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>
@natsu90

This comment has been minimized.

Copy link

@natsu90 natsu90 commented Jul 15, 2016

Cool, thanks. Demo is here, https://jsfiddle.net/1fynun7a/1/. I believe the last classes are not needed.

@rtvalluri

This comment has been minimized.

Copy link

@rtvalluri rtvalluri commented Oct 13, 2017

Great ! Thanks for sharing :)

@mrigdon

This comment has been minimized.

Copy link

@mrigdon mrigdon commented Jan 4, 2018

is there a modifier to make the lines dotted? thanks!

@hmrasi

This comment has been minimized.

Copy link

@hmrasi hmrasi commented Jan 8, 2018

Is there anyway to form a tree dynamically without using the lists i.e, li,ul?

@SayanThe01Guy

This comment has been minimized.

Copy link

@SayanThe01Guy SayanThe01Guy commented May 20, 2018

Thank You for the awesome Codes.

@RenateUSB

This comment has been minimized.

Copy link

@RenateUSB RenateUSB commented Jul 6, 2018

Simplified a bit, geometry adjusted, font size independent and works with a root node.
https://jsfiddle.net/1fynun7a/1591/
(The body font-size is only so you can play with it and see that it scales properly.)
(You could make dotted by changing "solid" to "dotted" but piecemeal dotted borders often run into sync problems.)

@cabolet

This comment has been minimized.

Copy link

@cabolet cabolet commented Jan 6, 2020

Hi, how can I return the selected item of the css tree to use as input to a database (I need to know only how to retrieve 1 item)

@tkafka

This comment has been minimized.

Copy link

@tkafka tkafka commented May 20, 2020

Took @RenateUSB solution and made it work with multiline items: https://jsfiddle.net/tomaskafka/ur1hvzy3/

@javansolo

This comment has been minimized.

Copy link

@javansolo javansolo commented Jun 28, 2020

right to left (rtl):
دوستان فارسی زبان سی اس اس راست چین برای نمایش درختی
https://jsfiddle.net/ykp2com3/

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.