css下划线怎么跟文字隔开

在CSS中，我们可以使用下划线为文字添加下划线样式。但是有时候，我们想要在下划线和文字之间添加一定的间距，以使页面更加美观，那么该怎么实现呢？下面我们来介绍几种方法。

方法一：使用padding或margin

span {
  text-decoration: underline;
  padding-bottom: 5px;
} 

或者：

span {
  text-decoration: underline;
  margin-bottom: 5px;
} 

这两种方法都是使用padding或margin来为文字和下划线之间添加间距，可以根据需要自行调整。

方法二：使用border-bottom

span {
  border-bottom: 1px solid black;
  padding-bottom: 5px;
} 

这种方法是使用border-bottom添加下划线样式，并使用padding来为文字和下划线之间添加间距。可以根据需要自行调整线条粗细和颜色。

方法三：使用pseudo元素

span {
  position: relative;
  text-decoration: none;
}

span::after {
  content: ';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background-color: black;
} 

这种方法是使用伪元素来实现下划线样式，并使用position来控制位置。可以根据需要自行调整位置和颜色。

总之，在为文字添加下划线样式时，我们可以选择不同的方法来为下划线和文字之间添加间距，以适应不同的需求。