css 中间文字两边线

在CSS中，我们可以使用伪元素来为文字两边添加线条效果，达到装饰文本的效果。

首先，我们需要在CSS中创建一个伪元素，可以是::before或::after。接着，在这个伪元素上设置相应的样式。

.content::before {
      content: '';
      display: inline-block;
      width: 50%;
      height: 2px;
      margin-right: 10px;
      background-color: #000;
}
.content::after {
      content: '';
      display: inline-block;
      width: 50%;
      height: 2px;
      margin-left: 10px;
      background-color: #000;
}
    

上述代码中，我们创建了一个::before伪元素和一个::after伪元素，并将它们设置为inline-block元素，这样可以让它们作为span元素的兄弟元素出现在文本中。

此外，我们使用了width属性来设置线条的长度，同时使用margin-right和margin-left属性来控制线条与文本的间距。

最后，我们为线条设置了背景色，你可以在此基础上随意更改颜色、粗细等多种样式。

要使用上面的样式，只需将文本包裹在带有content类名的span标签中即可。

span class="content">
    文本内容/span>
    

示例效果如下：

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