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

Question

当悬停链接时,我希望它获得下划线.下划线应该是2px强,比文本低4px.

同

text-decoration: underline

我得到1px强线,低于4px.(距离因字体而异)

如果我写

border-bottom: 2px solid #000;

我得到一条2px线,比文本低10px.

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

padding-bottom: -6px

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

或者我怎样才能使下划线强2px？

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

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;  
}

(例子)

Answer 2

您可以使用行高来减少距离.

.underline {
  display: inline-block;
  line-height: 0.9; // the distance
  border-bottom: 1px solid;
}

这种方法的缺点 - 因为我们使用块显示它只适用于文本的单行.