css横线

作者：′残花败落° 发布日期:2025-12-23 浏览:54

/* 使用 border 属性创建横线 */
hr {
    border: 1px solid black;
}

/* 或者使用 border-bottom 属性在元素下方创建横线 */
div {
    border-bottom: 1px solid black;
    margin: 20px 0; /* 添加一些上下间距，使横线更明显 */
}

/* 使用伪元素 ::after 创建横线 */
.container::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background-color: black;
    margin-top: 20px; /* 添加一些上间距 */
}

解释说明：

<hr> 标签：这是 HTML 中专门用于创建水平线的标签。通过设置 border 属性，可以自定义线条的颜色、粗细等样式。
border-bottom 属性：可以在任何块级元素（如 <div>）的底部添加一条横线，而不需要额外的 HTML 标签。
伪元素 ::after：通过伪元素可以在元素内容之后插入一个不可见的内容，并通过 CSS 设置其样式，从而实现横线效果。这种方式更加灵活，适合需要动态生成横线的场景。

上一篇：css input边框颜色

下一篇：cssfilter属性