I am trying to follow this tutorial and here's my code so far.
The end of the tutorial shows that the last nodes in a branch won't have any vertical bars after it. But I couldn't get it working that way!. Any ideas if I am doing something wrong, or maybe the tutorial is missing something!
I tried even the :last-child pseudo class as shown in the tutorial, but got the same result.
Here's a try using only pseudo-elements and borders:
ul, li{
position: relative;
}
/* chop off overflowing lines */
ul{
overflow: hidden;
}
li::before, li::after{
content: '';
position: absolute;
left: 0;
}
/* horizontal line on inner list items */
li::before{
border-top: 1px solid #333;
top: 10px;
width: 10px;
height: 0;
}
/* vertical line on list items */
li::after{
border-left: 1px solid #333;
height: 100%;
width: 0px;
top: -10px;
}
/* lower line on list items from the first level
because they don't have parents */
.tree > li::after{
top: 10px;
}
/* hide line from the last of the first level list items */
.tree > li:last-child::after{
display:none;
}
demo (edited)