如何使用 CSS 设置文本和下划线之间的间距？

在 HTML 中，我们可以使用下划线来表示链接。然而，有时候链接的下划线和文本之间的间距不太合适，因此需要设置一些 CSS 属性来改变它们之间的距离。

方法一：使用 text-decoration-line 属性

text-decoration-line 属性用于设置文字的装饰线。它有以下几个取值：

• none：表示没有任何装饰线（默认值）。
• underline：表示文本下方显示一条横线。
• overline：表示文本上方显示一条横线。
• line-through：表示文本中间显示一条横线。
• blink：表示装饰线在显示和隐藏之间切换，但这一值通常不被支持。

我们可以通过将 text-decoration-line 属性设置为 underline，并将 text-underline-offset 属性设置为一个正值，来增加下划线和文本之间的距离。

示例代码：

a {
  text-decoration-line: underline;
  text-underline-offset: 0.2em;
}

上面的代码表示所有链接都会显示下划线，并且下划线与文字之间的距离为 0.2em。

方法二：使用 border-bottom 属性

另一种方法是使用 border-bottom 属性来设置下划线。我们可以将其设置为带有透明颜色的边框，并将 line-height 属性设置为 0，这样下划线和文本之间就会产生一些间距。

示例代码：

a {
  text-decoration: none; /* 隐藏默认下划线 */
  border-bottom: 1px solid transparent; /* 设置透明下划线 */
  line-height: 0; /* 设置行高为 0 */
  padding-bottom: 0.2em; /* 设置下边距增加下划线和文本之间的距离 */
}

a:hover {
  border-bottom-color: black; /* 鼠标悬停时设置下划线颜色 */
}

上面的代码表示所有链接不会显示默认下划线，而是显示一条带有间距的透明下划线。当鼠标悬停在链接上时会将下划线颜色设置为黑色。

结语

上述方法中，text-decoration-line 属性是比较新的 CSS 属性，因此不是所有浏览器都支持。另一方面，使用 border-bottom 属性比较灵活，但需要设置一些额外的属性。你可以根据自己的需要选择其中一种方法，或者使用两种方法进行组合使用。

以上就是如何使用 CSS 设置文本和下划线之间的间距的介绍，希望对你有所帮助！