css中文字下面的横线怎么做

在CSS中，我们经常会看到一些文本下面有一条横线，这样的效果在一些文章中也常常出现。那么，这个横线是怎么做出来的呢？其实，这个效果的实现并不难，可以使用CSS中的text-decoration属性来完成。

首先，我们来看一下text-decoration这个属性。它有几个可选值，包括：none、underline、overline、line-through。其中underline表示设置文本下面的横线。下面是一个例子：

p {
  text-decoration: underline;
} 

上面的代码表示将p标签内的文本设置为带下划线的效果。这个下划线的颜色和粗细也可以设置，使用text-decoration-color和text-decoration-thickness属性即可。

但是，我们会发现上面的例子虽然可以使文本下面有下划线，但是下划线的颜色和粗细都是默认的，而且有时候它的位置也不是我们想要的。此时，我们可以使用border-bottom属性来实现。

p {
  border-bottom: 1px solid black;
} 

上面的代码表示将p标签下面的边框设置为黑色，宽度为1像素，形状为实线。这样就可以实现一个类似于下划线的效果了。同样地，边框的粗细、颜色、形状都可以自己调整。

另外，如果想要让文本下面的横线和文本宽度一致，可以将display属性设为inline-block或者inline，这样就可以实现横线不超出文本宽度的效果了。

综上所述，想要在CSS中实现文本下面的横线效果，可以使用text-decoration属性或者border-bottom属性，根据需求自行设置。