CSS verkleinern Abstand zwischen Text und Rahmen

Question

Wenn ich einen Link schwebe, möchte ich, dass er unterstrichen wird. Die Unterstreichung sollte 2px stark und 4px unter dem Text sein.

Mit

text-decoration: underline 

bekomme ich eine 1px starke Linie, die 4px unten. (Entfernungen ändern sich je nach Schriftart)

Wenn ich

border-bottom: 2px solid #000; 

schreibe ich eine 2px Linie erhalten, die über 10px unter dem Text.

Wie kann ich den Abstand zwischen dem Text und der Grenze verringern?

padding-bottom: -6px 

funktioniert nicht. Ein negativer Wert mit padding-bottom funktioniert nicht.

Oder wie bekomme ich die Unterstreichung, um 2px stark zu sein?

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

Answer 1

Eine schnelle Lösung, die mir in den Sinn kommt, ist die Grenze auf einem pseudo-Element anwenden:

.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

Sie line-height für Abnahme verwenden können Entfernung.

Nachteil dieser Methode - weil wir Blockanzeige verwenden, funktioniert es nur für einzelne Zeile des Textes.