css下划线与文本距离

CSS下划线是一种常见的文本装饰方式，它可以为文本增添重要性和视觉美感。除了下划线的颜色、粗细和样式等属性可以被调整之外，下划线与文本间的距离也可以通过CSS来进行控制。

下划线是通过CSS伪元素:before/:after生成的。我们可以利用:before 或 :after属性来调整下划线相对于文本的位置。

.text {
  position: relative;
  padding-bottom: 10px;
}
.text::before {
  position: absolute;
  content: "";
  background-color: red;
  height: 2px;
  width: 100%;
  bottom: 0;
  left: 0;
} 

上述代码中，我们将文本元素的position属性设为relative，并为文本使用padding-bottom来预留下划线占用的空间。接着使用:before为文本元素增加了一个伪元素，并将其定位在文本元素的底部。使用bottom:0将下划线与文本底部对齐，并将left:0以充满整个文本元素的宽度。而padding-bottom的值即为下划线与文本的距离。

除了利用:before 或 :after属性来控制下划线与文本间距离之外，我们还可以通过line-height属性来进行调整。

.text {
  text-decoration: underline;
  line-height: 3rem;
} 

上述代码中，我们为文本元素设置了一个3rem的line-height属性值。这样下划线就会相对于文本基准线向下偏移，与文本有一定的距离。

在具体实践过程中，根据实际需求选择不同的方式来控制下划线与文本间距离才能得到最好的效果。