Html 带全宽边框的嵌套列表项？

我有一个无序的列表，有多个嵌套项，最深可达5层。 为了分隔每个列表项，我添加了一个

边框底部

，如下所示：

li{
边框底部：1px纯红；
}
保险商实验室{
列表样式：无；
左：1米；
}

0.1评论
0.2评论


1.1评论（回复0.2）
1.2评论（回复0.2）


2.1评论（回复1.2）


1.2评论（回复0.2）

0.3评论

您可以使用绝对定位的伪元素：

#根{
位置：相对位置；
}
李：之后{
内容：'\0200B'；/*零宽度空间，用于将边框放置在文本下方*/
位置：绝对；/*相对于#根绝对定位*/
z索引：-1；/*将其放置在li后面，例如，以避免阻止选择*/
左：0；
右：0；
边框底部：1px纯红；
}
保险商实验室{
列表样式：无；
左：1米；
}

0.1评论
0.2注释
第二行
第三行


1.1评论（回复0.2）
1.2评论（回复0.2）


2.1评论（回复1.2）


1.2评论（回复0.2）

0.3评论

您可以将填充应用于

li

，并为

ul

提供负边距。 （每个级别都需要一个新规则）

ul{
列表样式：无；
左侧填充：0；
}
李{
边框底部：1px纯红；
}  
/*二级*/
li{左填充：1em；}
li li ul{左边距：-1em；}
/*三级*/
li{左填充：2em；}
li ul{左边距：2em；}
/*四级*/
li{左填充：3em；}
li ul{左边距：-3em；}
/*五级*/
li{左填充：4em；}
li ul{左边距：-4em；}
/*删除双边框*/
李莉：最后一个子项{边框底部：0；}

0.1评论
0.2评论


1.1评论（回复0.2）
1.2评论（回复0.2）


2.1评论（回复1.2）


1.2评论（回复0.2）

0.3评论