CSS减少文本和边框之间的空间

Question

当鼠标悬停在一个链接上时，我希望它有一个下划线。 下划线应在文本下方 2px 和 4px。

与

text-decoration: underline

我得到一条 1px 的强线，它在 4px 以下。 (距离因字体而异)

如果我写

border-bottom: 2px solid #000;

我在文本下方约 10px 处得到一条 2px 的线。

如何减小文本和边框之间的距离？

padding-bottom: -6px

不起作用。 padding-bottom 的任何负值都不起作用。

或者我怎样才能让下划线变得 2px 强？

http://jsfiddle.net/qJE2w/1/

2022 年更新:对于在提出这个问题多年后来到这里的每个人:

现在可以通过 CSS 更改下划线。有像 text-underline-offset 这样的"new"属性和 text-decoration-thickness .

Answer 1

我想到的一个快速解决方案是在伪元素上应用边框:

.border{
    position: relative;
}

.border:hover::after{
    content:'';
    position:absolute;
    width: 100%;
    height: 0;    
    left:0;
    bottom: 4px;                    /* <- distance */
    border-bottom: 2px solid #000;  
}

( example )