css 文字旁边中间划线

在CSS样式中，我们可以通过添加中线来划掉一段文字。但是，在某些情况下，我们希望通过在文字的中间添加一条线来突出显示特定的文本。这在一些网站设计中比较流行，比如在问答社区的最佳答案的标记中。

.text{
  position: relative;
  display: inline-block; /*使装载的图片与文字水平排列*/
}

.text::before{
  content: "";
  position: absolute;
  bottom: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  z-index: -1;
}

上面的代码是实现文本中间加线的方法，主要是通过在文字前添加一个伪类::before生成一条横线，并利用绝对定位把它放在文本中间。同时设置一个z-index属性使当前元素的z-index比较低，不会与后面的文本重叠。

值得一提的是，::before是CSS3中的新增伪类。除了可以实现文本中加线的效果，它还可以用来添加一些特别的图标等。