css下划线与文字间隔

下划线是一种常见的文本修饰方式，它可以用于强调、标记重点以及装饰文本等多种场合。而在CSS中，下划线有多种实现方式，下面我们来看一下具体的方法和实现效果。
一、text-decoration下划线
text-decoration是CSS中用于修饰文本的属性，它可以控制文本的下划线、删除线、颜色等多个属性。其中，text-decoration: underline;表示在文本下方添加一条下划线。
下面是一个使用text-decoration实现下划线的例子：

p {
  text-decoration: underline;
} 

效果图如下：
二、伪元素实现下划线
除了使用text-decoration属性外，我们还可以使用CSS的伪元素:before和:after实现下划线。具体方法是，在文本前后添加伪元素并设置宽度和高度，然后通过背景颜色来模拟下划线。
下面是一个使用伪元素实现下划线的例子：

p::before,
p::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 1px;
  width: 50%;
  background-color: black;
}
<br>
p::before {
  margin-right: 0.5em;
}
<br>
p::after {
  margin-left: 0.5em;
} 

效果图如下：
三、调整下划线与文本间隔
在默认情况下，下划线与文本之间的空隙是比较小的，有时候会显得拥挤难看。为了让下划线和文本之间的间隔更加合适，我们可以通过CSS的padding和margin属性来进行调整。
下面是一个调整下划线与文本间隔的例子：

p {
  text-decoration: underline;
  padding-bottom: 0.2em;
  margin-bottom: 0.2em;
} 

效果图如下：
综上所述，下划线不仅是一种常见的文本修饰方式，还可以通过CSS的text-decoration属性、伪元素以及padding和margin属性来实现。在实际应用中，我们可以根据具体的需求选择适合的实现方式，并调整下划线和文本之间的间隔，以达到更好的视觉效果。