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

是否有可能bottom-border没有继承list-item的填充并拉伸整个宽度？我认为可以使用a来完成background-image,但我更愿意找到一个纯CSS解决方案.

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

#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;
}

  
0.1 comment
  
0.2 comment
second line
third line
  

    

      
1.1 comment (reply on 0.2)
      
1.2 comment (reply on 0.2)
      

        

          
2.1 comment (reply on 1.2)
        
      
      
1.2 comment (reply on 0.2)
    
    
0.3 comment