如何实现左侧边框与项目符号对齐的嵌套列表样式？

需求说明 #

给嵌套列表设置样式，让包含子元素的列表显示延伸至末尾的垂直竖线，需要解决两个问题：

• 让左侧边框从项目符号下方开始对齐
• 移除最外层列表的左侧边框

原始HTML结构 #

<ul>
    <li>list item
        <ul>
            <li>list item</li>
            <li>list item 2</li>
        </ul>
    </li>
    <li>second list
        <ul>
            <li>list item</li>
        </ul>
    </li>
</ul>

实现CSS代码 #

/* 重置列表默认样式，统一间距，去掉最外层左边框 */
ul {
  list-style-type: disc;
  margin: 0;
  padding-left: 1.5em;
  border-left: none;
}

/* 仅给嵌套的子列表添加左边框 */
ul ul {
  border-left: 1px solid #000;
  padding-left: 1.2em;
}

/* 给列表项添加上下内边距，让竖线对齐到项目符号下方 */
ul li {
  padding: 0.2em 0;
}

效果说明 #

• 通过ul ul选择器，只给子列表添加左边框，自动去掉了最外层的边框
• 调整padding-left的数值，确保项目符号、内容和边框之间有合适的间距
• 给li设置上下内边距，让竖线自然延伸到列表项的上下区域，刚好对齐到项目符号的下方

内容的提问来源于stack exchange，提问作者sininen