2021年更新: text-underline-offset现在几乎适用于所有主流和最新版本的浏览器(IE11不支持):https://caniuse.com/?search=text-underline-offset

2019年更新:CSS工作组发布了文本装饰等级4的草案，该草案将添加一个新的属性text-underline-offset(以及text-decoration-thickness)，以控制下划线的确切位置。在撰写本文时，它还是一个早期的草案，还没有被任何浏览器实现，但看起来它最终会使下面的技术过时。

原始答案如下。

直接使用border-bottom的问题是，即使使用padding-bottom: 0，下划线往往离文本太远而不好看。所以我们仍然没有完全控制。

提供像素精度的一个解决方案是使用:after伪元素:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

通过更改bottom属性(负数也可以)，您可以将下划线精确地放置在您想要的位置。

使用这种技术需要注意的一个问题是，它在行换行时表现得有点奇怪。

我知道这是一个老问题，但对于单行文本设置显示:内联块，然后设置高度，这对我来说很好地控制了边框和文本之间的距离。

@last-child的回答很棒!

然而，给我的H2添加边框会产生一个比文本更长的下划线。

如果你正在动态编写CSS，或者如果你像我一样幸运，知道文本将是什么，你可以这样做:

把内容修改成合适的长度 Text)设置字体颜色为透明(或rgba(0,0,0,0))

下划线<h2>Processing</h2>(例如)， 更改last-child的代码为:

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

你可以使用:

text-underline-position: under;

text-underline-offset: {value(px)};

这个属性会根据你提供的offset值来移动链接下面的下划线。

如需更多参考资料，请访问: textunderlineoffest | developer.mozilla.org

这个问题有一个很简单的答案

text-decoration: underline;
text-underline-offset: 3px;

Text-underline-offset是CSS自己的方法。 这里有更多关于text-underline-offset的内容

如果您正在使用文本装饰:underline;，那么您可以使用text-underline-position: under;在下划线和文本之间添加空格

有关更多的文本下划线位置属性，您可以查看这里