css上下划线距离

CSS中实现上下划线效果是常见的操作，但是有时上下划线距离需要调整，下面我们一起来看看如何实现。

.text-underline {
  position: relative;
  text-decoration: none;
}
.text-underline:after {
  position: absolute;
  content: "";
  border-bottom: 2px solid red; /* 下划线颜色和宽度 */
  width: 100%;
  bottom: -5px; /* 下划线距离文字的距离 */
  left: 0;
} 

上面代码中，我们设置了一个类名为text-underline的样式，我们使用了伪类:after来实现下划线的效果。

我们发现，在样式中设置bottom:-5px可以改变下划线距离文字的距离，可以根据具体情况进行调整。

上面的代码演示了如何实现下划线距离文字的调整，通过改变bottom的值即可实现。