css一条横线串过文字

在网页设计中，经常需要用到横线来分隔不同模块，或者用来突出某些文字。而在CSS中，实现一条横线串过文字可以通过以下代码实现：

.text-with-line{
        position: relative;
        display: inline-block;
        margin-bottom: 10px;
        padding-bottom: 5px;
}
.text-with-line::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 100%;
        background-color: black;
}
    

首先，我们需要将包含文字的元素设置成相对定位（position: relative），然后给文字下方留出一些空隙，以便后面插入一条横线（margin-bottom: 10px; padding-bottom: 5px; ）。接着，在伪元素::after中设置一条绝对定位的横线，高度为1px，宽度为100%，颜色为黑色。bottom: 0和left: 0分别将线条定位在文字下方。

然后，在HTML中，我们可以这样使用这个样式：

p class="text-with-line">
    这是一段文字，下面有一条横线。/p>
    

运用这个CSS样式，我们就能快速添加一条横线串过文字，让网页看起来更加美观和清晰。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！