Question

当悬停链接时，我希望它获得下划线。下划线应该是2px强，比文本低4px。

使用

text-decoration: underline

我获得1px强线，低于4px。（距离因字体而异）

如果我写

border-bottom: 2px solid #000;

我得到一条2px线，比文本低10px。

如何减少文字和边框之间的距离？

padding-bottom: -6px

不起作用。 padding-bottom的任何负值都不起作用。

或者我怎样才能让下划线强2px？

http://jsfiddle.net/qJE2w/1/

Answer 1

我想到的一个快速解决方案是在伪元素上应用边框：

.border{
    position: relative;
}

.border:hover::after{
    content:'';
    position:absolute;
    width: 100%;
    height: 0;    
    left:0;
    bottom: 4px;                    /* <- distance */
    border-bottom: 2px solid #000;  
}

（example）

Answer 2

您可以使用行高来减少距离。

.underline {
  display: inline-block;
  line-height: 0.9; // the distance
  border-bottom: 1px solid;
}

这种方法的缺点 - 因为我们使用块显示它只适用于文本的单行。

Answer 3

您可以将background与linear-gradient结合使用来产生边框，并可以将其放置在任何位置。

例如：

background-image: linear-gradient(currentColor, currentColor);
background-position: 0 95%; /* determines how far from bottom */
background-repeat: no-repeat;
background-size: 100% 5px; /* second value determines height of border */

http://jsfiddle.net/1mg4tkwx/

信用：https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/

Answer 4

多行解决方案

说明。 。我正在创建一个具有相同文本和文本样式的兄弟姐妹，并且将其移至顶部。如果您想保持代码整洁，则可以在页面加载事件中使用JS插入同级。

限制。 。此解决方案不适用于文本段落。

.underlined_link {
  text-decoration: none;
  display: inline;
}
.underlined_link h2,
.underlined_link div {
  display: inline;
  font-size: 20px;
  margin: 0;
  line-height: 35px;
  font-weight: normal;
  padding: 0;
}
.underlined_link h2 {
  color: transparent;
  border-bottom: 1px solid red;
}
.underlined_link div {
  position: absolute;
  top: 10px;
  left: 8px;
}

<a class="underlined_link" href="#">
  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.</h2>
  <div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.</span></div>
</a>

Answer 5

此行对我有用：

$()

CSS减少文本和边框之间的空间

5 个答案:

多行解决方案