css在文字上加横线

CSS是前端开发中常用的样式表语言，可以对HTML中的各种元素进行样式设置。其中一种常见的效果就是在文本上加横线，下面我们就来介绍一下如何用CSS实现。

/* 定义横线样式 */
hr {
   border: none;
   border-top: 1px solid #ccc;
   margin: 10px auto;
}
 
/* 横线样式类 */
.text-underline {
   position: relative;
}
 
/* 实现横线效果 */
.text-underline::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 1px;
   background-color: #ccc;
   bottom: -6px;
   left: 0;
}

css在文字上加横线

以上代码中，我们先定义了一个样式为“hr”的元素，然后通过CSS将其边框样式设置为无，上边框样式为1像素实线的灰色，再设置上下外边距为10像素和自动水平居中对齐。

接下来，我们定义了一个样式类为“.text-underline”的元素，并对其设置了相对定位。最后通过“::before”伪元素来实现了横线的效果。具体实现方式是：创建一个空的“content”属性，将其设置为绝对定位，宽度为100%，高度为1像素，背景颜色为灰色，将其位置设置在元素底部同时向下偏移6像素，最后将其左侧对齐。

通过以上CSS代码的设置，我们可以轻松地在HTML的文本内容中添加横线效果。只需要将带有“.text-underline”样式的元素嵌套在需要加横线的文本内容上即可。相较于在HTML中直接添加横线标签而言，使用CSS设置横线可以更加灵活和优雅。

css在文字上加横线

相关文章