CSS减少文本和边框之间的空间-Java 学习之路

当悬停链接时，我希望它获得下划线 . 下划线应该是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/

2 回答

4
您可以使用行高来减少距离 .
```
.underline {
  display: inline-block;
  line-height: 0.9; // the distance
  border-bottom: 1px solid;
}
```
这种方法的缺点 - 因为我们使用块显示它只适用于文本的单行 .
回复于 2024-04-20T19:34:12+08:00

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

.border{
    position: relative;
}

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

（example）

回复于 2024-04-20T19:34:12+08:00

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

2 回答

相关问题