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

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没有继承list-item的填充并拉伸整个宽度？我认为可以使用a来完成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>