使用纯 CSS 创建层次结构列表

Question

我想制作一个如下所示的列表：

\n\n

\n\n

我不确定这种类型的设计是否有一个名称，但“层次结构列表”在谷歌上返回的结果看起来像我想要的，所以我在这里称之为它。例如，它本质上与文件系统浏览器中看到的 UI 模式相同（但这不是我的用例）。

\n\n

我相信我可以用 SVG 来实现这一点，但我想知道是否有一种使用纯 CSS 的方法？

\n\n

我尝试过的一件事是将嵌套的<ul>s 与before包含 unicode 框绘图字符（如 ）的伪元素一起使用\xe2\x94\x96。到目前为止我所拥有的是这样的：

\n\n

\r\n

\r\n

ul {\r\n  position: relative;\r\n}\r\n\r\nli {\r\n  list-style: none;\r\n}\r\n\r\nli.child::before {\r\n  content: "\xe2\x94\x96";\r\n  transform: scale(1, 1.8);\r\n  position: absolute;\r\n  left: 1em;\r\n}

\r\n

<ul>\r\n  <li>Root</li>\r\n  <ul>\r\n    <li class="child">Child Lv. 1</li>\r\n    <ul>\r\n      <li class="child">Child Lv. 2</li>\r\n    </ul>\r\n    <li class="child">Child Lv. 1</li>\r\n    <ul>\r\n      <li class="child">Child Lv. 2</li>\r\n      <li class="child">Child Lv. 2</li>\r\n    </ul>\r\n  </ul>\r\n</ul>

\r\n

\r\n

\r\n

\n\n

它看起来很糟糕，而且我想不出任何方法可以像我在图像示例中所做的那样，真正拥有连接项目的垂直线。希望有任何可以帮助我最接近我的图像示例的技巧。

\n\n

SVG 可能是可以接受的，但我不想只为这个 UI 组件添加任何重量级库，所以这就是我要求纯 CSS 的原因。

\n

Answer 1

根据 @CBroe 关于在伪元素中使用边框的建议，这是我想到的：

li {
  position: relative;
  list-style: none;
}

li.child::before {
  position: absolute;
  left: -1em;
  top: -0.5em;
  border-left-color: black;
  border-left-style: solid;
  border-left-width: 1px;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  content: "";
  width: 1em;
  height: 1.1em;
}

li.child2::before {
  position: absolute;
  left: -1em;
  top: -2em;
  border-left-color: black;
  border-left-style: solid;
  border-left-width: 1px;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  content: "";
  width: 1em;
  height: 2.5em;
}

li.child3::before {
  position: absolute;
  left: -1em;
  top: -3em;
  border-left-color: black;
  border-left-style: solid;
  border-left-width: 1px;
  border-bottom-color: black;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  content: "";
  width: 1em;
  height: 3.5em;
}

body {
  background: white;
}

<ul>
  <li>Root</li>
  <ul>
    <li class="child">Child Lv. 1</li>
    <ul>
      <li class="child">Child Lv. 2</li>
    </ul>
    <li class="child2">Child Lv. 1</li>
    <ul>
      <li class="child">Child Lv. 2</li>
      <li class="child">Child Lv. 2</li>
    </ul>
    <li class="child3">Child Lv. 1</li>
  </ul>
</ul>

它看起来近乎完美！<li>我们只需要计算当前元素上方有多少个元素<li>不在同一缩进级别即可确定元素的类，这应该很容易用一点 JavaScript 来完成。

谢谢@CBroe！