css 横线

/* 使用 border-bottom 创建横线 */
hr {
    border: 0;
    border-bottom: 1px solid #000;
    margin: 20px 0;
}

/* 使用 border-top 创建横线 */
hr.top-line {
    border: 0;
    border-top: 1px solid #000;
    margin: 20px 0;
}

/* 使用伪元素 ::before 或 ::after 创建横线 */
hr.custom-line::before {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #000;
    margin: 20px 0;
}

解释说明：

1. border-bottom：通过设置 border-bottom 属性来创建一条底部的横线。margin 属性用于控制横线与上下内容之间的间距。
2. border-top：类似地，使用 border-top 可以创建一条顶部的横线。
3. 伪元素：使用 ::before 或 ::after 伪元素可以在不改变 HTML 结构的情况下创建横线。这种方式更灵活，可以自定义更多样式。

如果你需要在 HTML 中使用这些样式，可以这样写：

<hr>
<hr class="top-line">
<hr class="custom-line">