Javascript 在<；李>；

是否可以在

中元素的每个缩进处绘制缩进指南（U+250B）？例如，我正在使用并希望在子1、子2的左侧绘制一个缩进参考线，在子1的左侧绘制两个参考线（因为它有两个缩进深度）

---

我对Javascript或CSS解决方案持开放态度，但如果解决方案更简单，我更喜欢CSS。

使用

：before

伪类

li li:before {
    content:'\250B';
    display:inline;
    float:left;
}
li li li:before {
    content:'\250B\250B';
    display:inline;
    float:left;
}

---

将边距添加到所有ULs，但不添加第一个ULs，然后添加左侧填充以将内容从边框移开，并将边框左侧添加到UL

ul {margin:0 40px;border-left:3px dashed black;padding-left:20px}
#nav-bar > ul {margin:0;border:0}

---

这就是我将如何使用灵活的css样式来影响

#nav bar ul

中的任何li

以下是css：

#nav-bar ul li {
    border-left: 1px dotted black;
    border-bottom: 1px dotted black;
    padding-bottom: 5px;
    padding-left: 10px;
}

最后，小提琴：

---

摆弄lis上的设置宽度：

你不应该从头开始。从

/

（使用polyfill）开始，并修改它。IDK如果我找到了你，请检查一下，是不是有这样的想法，但是使用U+250B而不是border？@bjb568出于向后兼容性的原因，这个解决方案是我创建的。另外，没有一个现有的解决方案可以封装我所需要的所有功能，所以我自己做了。@enapupe，就是这样。谢谢这个解决方案很好，我想我可以在这个例子中使用点边框而不是unicode字符，我只是说标记看起来很难看。好的，从细节/摘要开始，但尽量保持语义正确。这将要求我在深入一层时向CSS文件中添加新条目，所以这并不是很好。此外，

：before

的内容与上面的单词不一致。只需修改css即可实现所有级别，这只是一个快速显示。至于对齐，只需使用填充物和边距。谢谢！最后我确实做了一些调整，但总的来说，这个想法太棒了。