HTML/CSS嵌套左边框：重复的视觉效果

我在寻找这个嵌套的

左边框对HTML列表的影响。请注意，对于列表的每个嵌套级别，左边框是如何占用一个步骤的：


严格来说更像这样，所列术语和项目符号之间没有太大差距：


下面是一个简单的示例：



火箭弹

DA
生物冲击


莫巴

多塔
哈哈


您可以使用
左边框
样式实现您想要的功能。

编辑-在评论中回答OP的问题

1） 获取带边框的无限嵌套列表

将上述样式添加到
ul
，该样式将分别以父级ul和所有子级ul为目标，以留下边框

ul {
    border-left: 20px solid #000;
}

向父元素添加左边框也会增加子元素的边框。如果没有不同的边界，这应该是好的

2） 获取列表的自定义边框-

基本上，我删除了列表的所有填充，即
ul
，然后将
20px
border left
添加到
父列表
中，并将另一个
20px
border left
添加到
子列表中

对于
grand child
ul
过程是相同的，如果您给
ul
类名->
grand child
，css将如下所示-

ul.grandchild li {
    border-left: 30px solid #000;
}

与
父项
和
子项
ul
一起工作的代码段如下-


ul{
列表样式位置：无；
左侧填充：0；
}
/*
对于不同的边框尺寸
李家长{
左边框：20px实心#000；
}
李小童{
左边框：20px实心#000；
}
*/
/*对于具有相同半径的所有ul，不需要任何特定类别*/
保险商实验室{
左边框：20px实心#000；
}

火箭弹

DA
生物冲击


DA
生物冲击




莫巴

多塔
哈哈


有没有一种方法可以在不给每个嵌套级别显式类的情况下为无限多个嵌套级别执行此操作？我已经更新了我的帖子，以满足您的条件@ptrco。我希望有帮助@不要忘记接受答案。快乐编码！到目前为止你都试了些什么？这不是服务代码site@dippas：我尝试过的唯一解决方案与下面BrownkId的答案类似，但对于数量不确定的嵌套级别无效。正确解决方案的天才之处在于能够在不使用PHP/JS的情况下反复升级左边框，但只能使用CSS