CSS decrease space between text and border

Question

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

With

text-decoration: underline

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

If I write

border-bottom: 2px solid #000;

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

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

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

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

Answer 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;  
}

(example)