如何使用纯CSS获取HTML树

Question

我正在尝试按照本教程,这是我的代码到目前为止.

本教程的结尾显示分支中的最后一个节点后面没有任何垂直条.但我无法让它以这种方式运作!如果我做错了什么想法,或者教程遗漏了什么!

我甚至尝试过:last-child伪类,如教程中所示,但得到了相同的结果.

Answer 1

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

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;
}

演示(编辑)

Answer 2

遗憾的是，伪类是在即将推出的 CSS3 规范中定义的，目前很少有 Web 浏览器支持它。

它写在教程的最后。也许这就是它不起作用的原因。