如何使用纯 CSS 在 HTML 中获取一棵树

我正在尝试遵循这个tutorial http://odyniec.net/articles/turning-lists-into-trees/这是my code https://github.com/gurjeet/CSSTree so far.

本教程的结尾显示分支中的最后一个节点后面不会有任何竖线。但我无法让它以这种方式工作！如果我做错了什么，或者教程可能遗漏了一些东西，有什么想法吗！

我什至尝试了 :last-child 伪类，如教程中所示，但得到了相同的结果。

这是仅使用伪元素和边框的尝试：

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 http://dabblet.com/gist/4972250（已编辑）