css中文字下面怎么加横线

在一些网页设计中，我们可能需要对一些文本增加下划线来加强视觉效果。那么在CSS中，我们该如何实现这个效果呢？

 /* 基础样式 */
  .text-underline {
    text-decoration: underline;
  } 

上面的代码可以实现文本下方展示一条横线的效果。

 /* 换行去除横线 */
  .text-underline {
    text-decoration: underline;
    text-underline-position: under;
  } 

如果不想让横线占用整行的空间，可以设置text-underline-position为under，使下划线位置在文本下面，而不是在整个行的底部。

 /* 颜色样式 */
  .text-underline {
    text-decoration: underline;
    color: #333;
    text-underline-position: under;
  } 

我们可以通过设置color属性，改变下划线的颜色。

 /* 完整样式 */
  .text-underline {
    text-decoration: underline;
    color: #333;
    text-underline-position: under;
    text-underline-offset: 3px;
  } 

还可以通过text-underline-offset属性，控制下划线的偏移量。

以上就是CSS中实现文本下方增加横线的方法。