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

Question

我正在构建我的网站，但我遇到了一个问题。 Here is the webpage.

我想只为链接添加3px下划线，如下所示：

文本的行高为56pt，因此border-bottom距离链接太远。 text-decoration: underline太薄了，太近了。

他们需要大约一半的距离。由于不存在负填充，我该如何修复呢？

Answer 1

现在习惯了这段代码（这是演示）

<强>的CSS

.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    border-bottom:solid 1px red;

}

<强> Demo LInk

Answer 2

回答1：接受css有限制并解决它们。

答案2：我能做到这一点的唯一方法是使用跨度显示它是一个块并添加边框和填充到底部 - 这个过程将打开另一个虽然浮动阻止内联文本等蠕虫，所以我会回去回答1。

Answer 3

尝试添加以下内容：

display: inline-block;
height: 1.2em;

没有经过广泛测试，但似乎在现代浏览器中很好地缩小了差距。

Answer 4

你试过这个吗？

   a {
    border bottom: 3px red;
    }