CODEWITHSUNDEEP
htmlcssstylesheetstylingtext-decorations
crmpicco
crmpicco

Reputation: 17181

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

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>

Upvotes: 0

Views: 566

Answers (4)

crmpicco
crmpicco

Reputation: 17181

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.

Upvotes: 0

jackwanders
jackwanders

Reputation: 16020

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

Upvotes: 2

Christoph
Christoph

Reputation: 51191

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.

Upvotes: 0

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66971

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/

Upvotes: 0

Related Questions