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

【问题标题】：How do I reduce the distance between the border-bottom and parts of text?如何减少边框底部和部分文本之间的距离？
【发布时间】：2013-04-11 13:32:06
【问题描述】：

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

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

文本的行高是 56pt，所以边框底部离链接太远了。 text-decoration: underline 太瘦了，太近了。

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

【问题讨论】：

请贴一些代码。 -1
Line-height 是你唯一可以调整来改变它的东西。
你能发布一个 jsfiddle 示例

标签： css underline

【解决方案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 3 - 必须将此加入书签！不过，我可以看到某些旧浏览器的一些限制。
非常感谢！我已经根据我现在的需要进行了调整。我对编码还是很陌生，从来没有听说过使用 :after。
遗憾的是，这不适用于更长的链接，虽然...我想使用这种技术但又回到了边框底部，因为多行链接只有在最后一行之后才有下划线这段代码。

【解决方案2】：

答案 1： 接受 css 的局限性并解决它们。

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

【讨论】：

【解决方案3】：

尝试添加以下内容：

display: inline-block;
height: 1.2em;

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

【讨论】：

【解决方案4】：

你试过了吗？

   a {
    border bottom: 3px red;
    }

【讨论】：