css - How do I reduce the distance between the border-bottom and parts of text?

Question

I'm currently building my website and I've run into a problem. Here is the webpage.

I want to add 3px underlines to only the links, like this:

The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.

They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?

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;

}

演示链接

Answer 2

尝试添加以下内容：

display: inline-block;
height: 1.2em;

尚未进行广泛测试，但似乎在现代浏览器中很好地缩小了差距。

Answer 3

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

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

Answer 4

你试过这个吗？

   a {
    border bottom: 3px red;
    }