css文字上的横线怎么写

什么是CSS文字上的横线？

在CSS中，文字上的横线是一种文字效果，通常用于强调、划重点或者代表删除线等效果。它也可以用来表示下划线或者中见线效果，具体看使用场景。

如何通过CSS创建文字上的横线？

使用text-decoration属性

为了在文字上方创建一个横线，你可以使用text-decoration属性。这个属性控制链接和文本装饰属性，比如下划线、删除线等。

p {
  text-decoration: overline;
}

使用text-decoration要指定你需要设置的装饰样式，使用line-through可以用来添加一个删除线，underline可以用来加下划线。

p {
  text-decoration: line-through;
}

如果你想修改装饰线的颜色，可以用text-decoration-color属性。

p {
  text-decoration: underline;
  text-decoration-color: red;
}

使用伪元素

在某些情况下，你可能希望使横线更灵活，包括决定离基线多远以及颜色、样式等等。在这种情况下，可以使用CSS伪元素:before或者:after。

h2::before {
  content: "";
  display: block;
  border-bottom: 1px solid black;
  width: 50%;
  margin: 0 auto;
}

在这个例子中，使用了::before伪元素来创建横线。内容为空，因为我们只是需要伪元素占用空间以创建横线。伪元素设置为块级元素，可以让它单独占用一行。设置border-bottom属性并给定一个黑色实线，从而为所需的元素添加横线。width设置为50%，以使横线在元素中水平居中。

结论

通过CSS创建文字上的横线非常简单，你可以使用text-decoration属性，或者更加灵活的使用伪元素来创建一个横线。使用这两种方法之一，你可以添加文本装饰效果，让你的文本更加易于阅读。