javascript - 如何在第 3 个和第 4 个列表项之间插入一个关键线，但宽度是父元素的宽度？

Question

我正在尝试使用第 nth-child 和之后的类名在两个列表项之间创建一个键线。这里的技巧是列表项是 ~250px 宽，float:left 并且我希望 keyline 在第三个列表项之后扩展 1000px 宽的父 div 的宽度。到目前为止，我已经能够在第三个列表项之后创建关键线，但它的宽度仍然是 250 像素宽:

    #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

在这里你可以看到这段代码。

你需要在这段代码中给出position:absolute

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

勾选此项希望对您有所帮助。

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