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

悬停链接时，我希望它获得下划线。下划线应该是2px强，文字下方4px。CSS减少文本和边框之间的空间

随着

text-decoration: underline

我得到1px的强大阵容这是4PX以下。（距离由字体会发生变化）

如果我写

border-bottom: 2px solid #000;

我得到2px的线，其是文本低于约10px的。

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

padding-bottom: -6px

不起作用。任何带填充底部的负值都不起作用。

或者我如何得到下划线是2px强？

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

来源

2013-02-06 oliverspies

padding-bottom不能有负值，请尽量使用margin-bottom – Mark

一个来进入我的脑海里快速的解决方案是应用伪元素的边界：

.border{ 
    position: relative; 
} 

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

（example）

来源

2013-02-06 15:51:57

完美 - 谢谢！ – oliverspies

upvoted，没有丑陋的技巧 – RobAu

不适用于较长的链接包装行:( – somatic

您可以使用行高度降低距离。

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

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

来源

2015-01-15 08:27:24 vatavale

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

回答

相关问题