css 中间文字 两边横线

在CSS中，我们可以使用伪元素::before和::after来实现在文字两边加横线的效果。具体实现步骤如下：

span:before, span:after {
        content: "";
        display: inline-block;
        width: 30%;
        height: 1px;
        background-color: black;
}
span:before {
        margin-right: 1rem;
}
span:after {
        margin-left: 1rem;
}
    

上述代码中，我们首先定义了两个伪元素::before和::after，并给他们设置了display属性值为inline-block，利用伪元素对文字进行了样式设置。

接着，我们设置了伪元素的宽度为30%，高度为1像素，背景颜色为黑色，实现了横线的效果。

最后，我们通过设置before的margin-right和after的margin-left实现了横线与文字之间的间距效果。

最终，我们只需要将要实现效果的文字用span标签进行包裹，并给该标签设置相应的class样式，就可以实现文字两边横线的效果了。

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