如何在第3个和第4个列表项之间插入关键点，但是要成为父元素的宽度？

Question

I'm trying to create a keyline between two list items with class names using nth-child and after. The trick here is that the list items are ~250px wide, float:left and I want the keyline to extend the width of the parent div that is 1000px wide, after the third list item. So far I have been able to create the keyline after the third list item, but it's width remains 250px wide:

  #FS-TilesContainer { margin: auto; width: 1000px; } .FS-Tile { float: left; overflow: hidden; width: 225px; margin: 0 0 47px 35px; } .FS-Tile:nth-child(-n+3) { width: 300px; } .FS-Tile:nth-child(3)::after { content:''; border-top: 5px solid #EAEAEA; display: block; width: 1000px; left: 0; } 

  <div id="FS-TilesContainer"> <ul id="FS-TilesGrid"> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> <li class="FS-Tile"></li> </ul> </div> 

Answer 1

Here you can see in this code.

You need to give position:absolute in this code

.FS-Tile:nth-child(3)::after {
    content: '';
    border-top: 5px solid #EAEAEA;
    display: block;
    width: 1000px;
    left: 0;
    position: absolute; //new added
}

Check this hope it will helpful to you.

 #FS-TilesContainer { margin: auto; width: 1024px; } .FS-Tile { float: left; overflow: hidden; width: 221px; margin: 0 0 47px 35px; } .FS-Tile:nth-child(-n+3) { width: 300px; } .FS-Tile:nth-child(3)::after { content:''; border-top: 5px solid #EAEAEA; display: block; width: 1000px; left: 0; position:absolute; } 

 <div id="FS-TilesContainer"> <ul id="FS-TilesGrid"> <li class="FS-Tile">test</li> <li class="FS-Tile">test1</li> <li class="FS-Tile">test2</li> <li class="FS-Tile">test3</li> <li class="FS-Tile">test4</li> <li class="FS-Tile">test5</li> <li class="FS-Tile">test6</li> <li class="FS-Tile">test7</li> <li class="FS-Tile">test8</li> </ul> </div>