css 文字两边加条横线

CSS的文本效果非常丰富，今天我们来介绍一下如何在文字两边加上条横线。

在CSS中，我们可以使用text-decoration属性来控制文本的下划线、删除线和上划线等样式，其中，我们用到的是text-decoration-line属性，它可以设置文本的装饰线条样式，常用的有以下几种：

text-decoration-line: underline;
        /* 下划线 */text-decoration-line: line-through;
     /* 删除线 */text-decoration-line: overline;
         /* 上划线 */text-decoration-line: none;
         /* 取消装饰线 */

但是，它不能单独控制文本两边的线条，因此，我们需要使用伪元素来实现这个效果。

p:before {
    content: "";
       /* 伪元素必须有content属性 */display: inline-block;
       /* 内联元素显示为块元素 */width: 50px;
       /* 线条宽度 */height: 1px;
       /* 线条高度 */background-color: #ccc;
     /* 线条颜色 */margin-right: 10px;
   /* 距离文字的距离 */}
p:after {
    content: "";
    display: inline-block;
    width: 50px;
    height: 1px;
    background-color: #ccc;
    margin-left: 10px;
}
    

上面的代码中，我们使用了:before和:after伪元素来实现在文本前后添加线条的效果，其中，:before用于添加左侧的线条，:after用于添加右侧的线条，它们的具体样式可以根据实际情况进行调整。

最后，我们可以将样式应用到p标签上，就可以看到文字两侧加上了一条横线的效果了。

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