css中文字两边各一条横线

在CSS中，我们可以使用 text-decoration属性来为文字添加下划线或删除线。但是如果想为文字两边各添加一条横线该怎么做呢？可以借助伪元素来实现。来看下面的CSS代码：

p {
  position: relative;
}

p::before,
p::after {
  content: ';
  position: absolute;
  bottom: -0.15em;
  border-bottom: 1px solid #000;
  width: 50%;
}

p::before {
  left: 0;
}

p::after {
  right: 0;
} 

这段CSS代码定义了一个p元素相对定位，并为它的 ::before 和 ::after 伪元素添加了样式。::before伪元素位于文字的左边，::after伪元素位于文字的右边。两个伪元素的宽度均为50%，通过设置bottom属性将它们放置在文字下方，并为它们添加1px宽度的黑色底边框，就实现了文字两边各一条横线的效果。

在HTML中，只需要将要添加横线的文字放在p元素中就可以了：

<p>这是要添加横线的文字</p> 

上面的代码将会渲染为:

这是要添加横线的文字

如果想要调整横线的位置或者样式，只需要修改CSS代码中相应的属性值就可以了。这种方法在设计网页时非常实用，可以为文章中的标题、列表项等添加漂亮的横线效果，增强排版效果，吸引读者的眼球。