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

Question

I have an unordered list with multiple nested items up to 5 levels deep. To seperate each list-item, I'm adding a border-bottom as follows:

  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> 

Is there a possibility to have a bottom-border that does not inherit the list-item's padding and stretches the full width? I think it could be done using a background-image , but I'd prefer to find a pure CSS solution.

Answer 1

You can use absolutely positioned pseudo-elements:

 #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, eg 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> 

Answer 2

You could apply the padding to the li and give negative margin to the ul . ( it requires a new rule for each level )

 ul { list-style:none; padding-left: 0; } li { border-bottom: 1px solid red; } /*level 2*/ li li{padding-left: 1em;} li li ul{margin-left: -1em;} /*level 3*/ li li li{padding-left: 2em;} li li li ul{margin-left: 2em;} /*level 4*/ li li li li{padding-left: 3em;} li li li li ul{margin-left: -3em;} /*level 5*/ li li li li li{padding-left: 4em;} li li li li li ul{margin-left: -4em;} /*remove double borders*/ li li:last-child{border-bottom:0;} 

 <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>