控制下划线在文本装饰上的位置：下划线 [英] Control underline position on text-decoration: underline

问题描述

是否可以控制下划线在文本装饰中的位置：下划线？

Is there a way to control the position of the underline in text-decoration: underline?

<a href="#">Example link</a>

上面的示例默认情况下带有下划线...是否可以通过以下方式微调下划线几个像素，以便文本和下划线之间有更多的空间？

The example above has an underline by default...is there a way to nudge that underline down by a few pixels so that there is more space between the text and the underline?

推荐答案

2020

使用 text-underline-offset ！

唯一的方法是使用边框而不是下划线。

The only way to do that is to use a border instead of an underline. Underlines are notoriously inflexible.

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

这是一个演示。如果空间不足，您可以轻松添加更多-如果空间太多，则使用起来会不太方便。

Here's a demo. If that's not enough space, you can easily add more — if it's too much, that's a little less convenient.

这篇关于控制下划线在文本装饰上的位置：下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！