博客讨论了如何使用CSS为无序列表创建层次结构的视觉表示，特别是通过使用伪元素和边框创建连接线。作者遇到了图标与连接线重叠的问题，尝试调整z-index未果。解决方案包括使用特殊字符作为项目符号，以及调整CSS样式以避免重叠，同时保持曲线连接线的可见性。示例代码和jsFiddle链接提供了详细的实现方法。
我无法想像出一个层次结构的CSS，就像一堆文件和文件夹。我使用嵌套的无序列表：
- animals
- dogs
- cats
它们显示出正确的CSS减去连接线。我需要连线。我用以下CSS来做到这一点：
ul ul li:before {
content: "";
padding: 15px;
border: 1px solid #000;
border-width: 0 0 1px 1px;
border-radius: 0 0 0 10px;
position: absolute;
left: -22px;
top: -15px;
}
问题是与动物，狗和猫的图标重叠。我尝试改变z-index没有任何效果。有没有更好的方法来实现这一点与CSS？还是有另一种方式来使z-index有意义？
502_13@
jsFiddle Demo
有一个伟大的日期online tutorial，完全符合你的要求。
它使用图像创建唯一的项目符号，但在您的情况下，您可以使用管道(即|)符号，并使用所需的颜色指定较大的字体大小。
截图：
编辑：
这是一个额外的jsFiddle复制您的曲线连接线。
编辑2：
这是最后修订的jsFiddle修订版本，它增加了一个转义空间，以便在保持曲线连接的同时具有更好的可见性。
编辑3：这个特定的空白空间是上述演示中用于内容属性的选项：
Entity Name Symbol/Description
en space
可以肯定的是，特殊的空格是Symbol下面3个空格间隔的中间。使用它不需要使用替代字符加透明度来模拟空格。降低透明度属性意味着IE8很开心。以下情况下，下面的空行包含1个单独的特殊空白字符。复制到剪贴板使用，因为实体和名称不起作用：
3583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
