CSS减少了文字和边框之间的空间 [英] CSS decrease space between text and border

问题描述

当悬停链接时，我希望它获得下划线. 下划线应在文字下方2px处，并在下方4px处.

When hovering a link I want it to get an underline. The underline should be 2px strong and 4px below the text.

使用

text-decoration: underline

我得到一条1px的粗线，在下面4px. (距离因字体而异)

I get a 1px strong line which is 4px below. (Distances vary by font)

如果我写

border-bottom: 2px solid #000;

我得到一条2px的行，大约比文本下方10px.

I get a 2px line which is about 10px below the text.

如何减小文本和边框之间的距离?

How can I decrease the distance between the text and the border?

padding-bottom: -6px

不起作用.带有padding-bottom的任何负值均不起作用.

does not work. Any negative value with padding-bottom does not work.

或者我如何使下划线变得2px强?

Or how can i get the underline to be 2px strong?

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

推荐答案

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

One quick solution that comes into my mind is to apply the border on a pseudo-element:

.border{
    position: relative;
}

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

(示例)

这篇关于CSS减少了文字和边框之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！