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/

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

现在可以通过 CSS 更改下划线。有一些“新”属性，例如 text-underline-offset 和 text-decoration-thickness 。

原文由 obs 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

（ 示例）

原文由 nice ass 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

display: inline-block;
line-height: 1;

出于某种原因，行高在其默认内联显示的跨度中不适用。它必须显示为块或内联块。将 line-height 设置为 1 可以消除边框和文本之间的间隙。从这里，您可以设置填充以控制文本边缘与其相应边框之间每侧的间隙大小。

原文由 Richard 发布，翻译遵循 CC BY-SA 4.0 许可协议