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

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:

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

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.

文本的行高为56pt,因此border-bottom距离链接太远。文字装饰:下划线太薄,而且太近了。

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

它们需要大约一半的距离。由于不存在负填充,我应该如何修复它?

4 个解决方案

#1

Now used to this code (This is demo)

现在习惯了这段代码(这是演示)

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

#2

Answer 1: Accept that css has limitations and work round them.

答案1:接受css有局限性并绕过它们。

Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.

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

#3

Try adding the following:

尝试添加以下内容:

display: inline-block;
height: 1.2em;

Haven't tested extensively, but seems to close the gap nicely in modern browsers.

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

#4

did you try this?

你试过这个吗?

   a {
    border bottom: 3px red;
    }