html - 具有全宽边框的嵌套列表项？

Question

我有一个无序列表，其中包含最多 5 层深的多个嵌套项。为了分隔每个列表项，我添加了一个 border-bottom，如下所示:

    li {
      border-bottom: 1px solid red;
    }
    ul {
      list-style: none;
      padding-left: 1em;
    }

<ul>
  <li>0.1 comment</li>
  <li>0.2 comment</li>
  <li>
    <ul>
      <li>1.1 comment (reply on 0.2)</li>
      <li>1.2 comment (reply on 0.2)</li>
      <li>
        <ul>
          <li>2.1 comment (reply on 1.2)</li>
        </ul>
      </li>
      <li>1.2 comment (reply on 0.2)</li>
    </ul>
    <li>0.3 comment</li>
</ul>

是否有可能有一个bottom-border 不继承列表项的填充并拉伸(stretch)整个宽度？我认为可以使用 background-image 来完成，但我更愿意找到纯 CSS 解决方案。

Answer 1

你可以使用绝对定位的伪元素:

#root {
  position: relative;
}
li:after {
  content: '\0200B'; /* Zero-width space to place the border below the text */
  position: absolute; /* Absolutely positioned with respect to #root */
  z-index: -1; /* Place it behind the li, e.g. to avoid preventing selection */
  left: 0;
  right: 0;
  border-bottom: 1px solid red;
}
ul {
  list-style: none;
  padding-left: 1em;
}

<ul id="root">
  <li>0.1 comment</li>
  <li>0.2 comment<br />second line<br />third line</li>
  <li>
    <ul>
      <li>1.1 comment (reply on 0.2)</li>
      <li>1.2 comment (reply on 0.2)</li>
      <li>
        <ul>
          <li>2.1 comment (reply on 1.2)</li>
        </ul>
      </li>
      <li>1.2 comment (reply on 0.2)</li>
    </ul>
    <li>0.3 comment</li>
</ul>