html - 如何让列表中的水平线跨越到 HTML 中的行尾？

Question

我真的不知道如何创建这个。你有什么建议吗？

Answer 1

这是我的尝试

li {
  position: relative
}
li::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  border-bottom: 1px solid;
  z-index: -1
}
li span {
  background-color: #fff
}

<ul>
<li><span>First line of the list. And for testing length</span></li>
<li><span>Second line of the list</span></li>
<li><span>Third line of the ul. And this is also the last line of the list.Third line of the ul. And this is also the last line of the list</span></li>
</ul>