如何制作纯粹用于装饰的分隔/小时？

Question

我想制作一条水平线来指定用户在表格的另一侧查找相应信息的位置。有没有人知道怎么做而不必输入“----”s？

像这些水平线一样 Here

或者基本上，我将如何完成上述图像示例？

Answer 1

我将如何做到这一点：

你有一个ul＆gt;例如，li列表。

li具有灰色背景色。 跨度也具有灰色背景颜色，以及相对于z指数为2的位置。

然后我们需要一个：在li之后，底部有一个虚线边框。

Ez pz对吗？

HTML：

<ul>
    <li>
        <span>Chapter 1</span>
        <span class="page">1.0</span>
    </li>
</ul>

CSS：

ul, li {
    list-style:none;
    padding:0;
    margin:0;
}
li {
    position:relative;
    background-color:grey;
}
li span {
    position:relative;
    z-index:2;
    float:left;
    background-color:grey;
}
li span.page {
    float:right;
}
li:after {
    border-bottom:1px dashed black;
    width:100%;
    position:absolute;
    top:10px;
    left:0;
    height:1px;
    z-index:1;
    content:'';
}