removing the one pixel clearance when using CSS text-decoration: underline

Question

I have the following CSS and markup on my site which produces an underline when I hover over the Account link.

By default, the underline is shown one pixel clear of the text. Is it possible to have the underline directly under the text without the one pixel clearance.

I would like this for all links on my site, if possible.

a:active {
    outline: none;
}

a.current {
    text-decoration: underline;
    color: #000000;
    outline: none;
}
a:hover, a.active {
    color: #000000;
    outline: medium none;
    text-decoration: underline;
}

<a href="http://www.ayrshireminis.com/account/login/">Account</a>

Answer 1

Yes, you can use a bottom border, but you need to enable inline-block styling in order to adjust the line-height of the anchor properly:

a {
    text-decoration: none;
    color: #c64;

    /* cross-browser inline-block styling */
    display:inline-block;
    zoom:1;
    *display:inline;

    /* alter line-height until the border appears where you want it */
    line-height: .7em;
}

a:hover, a:active{
    padding-bottom:0;
    border-bottom:1px solid black;
}

jsFiddle DEMO

Answer 2

No, you can't modify that. However you could fake it with something like the following:

a:hover, a.active{
    border-bottom:1px solid black;
}​

a{
    padding-bottom:0;
    display:inline-block;
    line-height:.8 /*adjust accordingly*/;
}

the display:inline-block; is needed for the line-height to work properly.

Answer 3

You'd want to make the <a> a block, otherwise padding can't effect anything.

a { display: block; line-height:0.75em; ... etc }

a:hover { border-bottom:1px solid #000; }

http://jsfiddle.net/y49jN/3/

Answer 4

I have also found that setting the height of the div, span or p to less than the font-size and using border-bottom: 1px solid black instead of text-decoration: underline brings the border closer to the text or element.