如何让边框底部更接近文本？答案

【问题标题】：How to get the border-bottom closer to the text?如何让边框底部更接近文本？
【发布时间】：2014-05-29 10:40:58
【问题描述】：

我想为链接使用边框底线（不是文本装饰下划线）。但我需要让线条更靠近文本。负填充是不可能的，我该怎么办？这是一个例子：

a {
  color: #245fc1;
  position: relative;
  border-bottom: 1px solid #245fc1;
  padding-bottom: 0px;
  text-decoration: none;
}

<a href="#">i want the line to be nearer</a> on the text
<bR/> because if i write in second line the bottom line from above is too close.
<bR/> using text-decoration: underline is not an option for me!

【问题讨论】：

如果你有兴趣使用脚本来解决你的问题，你可以查看这个演示jsfiddle.net/viphalongpro/2JSY4/21。请注意，使用脚本为您提供了最漂亮的解决方案。

标签： html css

【解决方案1】：

如果您将链接设置为display:inline-block;，您将能够设置较小的行高（小于1）并将下边框移近文本：

a {
  color: #245fc1;
  display: inline-block;
  line-height: 0.7em;
  position: relative;
  border-bottom: 1px solid #245fc1;
  padding-bottom: 0px;
  text-decoration: none;
}

&lt;a href="#"&gt;I want the underline to be closer&lt;/a&gt; to the text&lt;br/&gt;because if I write in second line the bottom line from above is too close. &lt;br/&gt;using text-decoration: underline is not an option for me!

【讨论】：

inline-block 当然，当链接被包装成多行时，它会以意想不到的方式加下划线。
@KingKing 是的，但是由于 OP 使用边框，如果链接显示在多行上，它无论如何都会看起来很奇怪，所以我的猜测是在 OP 的情况下不会发生这种情况。
即使是这种情况，这也是最简单的解决方案，否则我认为我们没有一些简单的解决方案，除非尝试用一些脚本来破解它。
当链接的文本必须换行时，这不起作用。不过谢谢你的建议..
@KhomNazid 是的，这要求带下划线的文本显示为内联块。

【解决方案2】：

另一种方法是使用伪元素::after 为您的边框赋予不同的高度。

这是您的示例：http://jsfiddle.net/2JSY4/7/

你的新 CSS：

a{
    color: #245fc1;
    position: relative;
    padding-bottom: 0px;
    text-decoration: none;
}

a::after{
    content:'';
    position:absolute;
    width: 100%;
    height: 0;    
    left:0;
    bottom: 1px;                   
    border-bottom: 2px solid #000;  
}

【讨论】：

使用这种方法，我的文字根本看不到任何底线。

【解决方案3】：

这是另一种使用线性渐变的解决方案，您可以轻松调整距离、大小、颜色等：

a {
  color: #245fc1;
  display: inline-block;
  line-height: 0.7em;
  position: relative;
  background-image:linear-gradient(#245fc1,#245fc1);
  background-position:0 100%; /*adjust the position to make it closer*/
  background-size:100% 1px; /*adjust the size of the line*/
  background-repeat:no-repeat;
  padding-bottom: 1px;
  text-decoration: none;
}

&lt;a href="#"&gt;I want the underline to be closer&lt;/a&gt; to the text&lt;br&gt;because if I write in second line the bottom line from above is too close. &lt;br&gt;using text-decoration: underline is not an option for me!

【讨论】：

在包装文本链接或 a:hover 上的过渡效果不佳。
@KhomNazid 如果您希望它与包装文本一起工作，您需要删除内联块；）我们可以很好地处理转换，只需要指定您想要获得的转换跨度>

【解决方案4】：

试试这个{demo}

a{
    color: #245fc1;
    position: relative;
    border-bottom: 1px solid #245fc1;
    text-decoration: none;
    line-height:0px;
    height:7px;
    display:inline-block;
}

【讨论】：

这与上面两篇文章中提供的内容有何不同？
我使用了高度，他没有，他使用了填充，我没有