css - 控制文本装饰上的下划线位置 : underline

Question

有没有办法控制text-decoration: underline中下划线的位置？

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

上面的示例默认有下划线...有没有办法将下划线向下移动几个像素，以便文本和下划线之间有更多空间？

Answer 1

2020

使用text-underline-offset !

2012

做到这一点的唯一方法是使用边框而不是下划线。下划线是出了名的不灵活。

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

Here's a demo.如果空间不够，您可以轻松地添加更多——如果空间太多，就不太方便了。