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減少文本和邊框之間的空間

回答

相關問題