Question

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

＆＃13;

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

＆＃13;

<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!

＆＃13;

Answer 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;
}

<a href="#">I want the underline to be closer</a> to 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!

Answer 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;  
}

Answer 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;
}

<a href="#">I want the underline to be closer</a> to 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!

Answer 4

试试这个{demo}

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

如何使边框底部更接近文本？

4 个答案: