Hyperlink with same width underline

Question

We are developing a site and one of the quirks that we would like to have is links to be underlined when hovered with the line always having the same width no matter how long (or short) the text of the link is.

How would you implement this in CSS/jQuery/Javascript?

Answer 1

Are you looking for something like this ? This will work unless the anchor element has a smaller width than the background image.

Answer 2

border-bottom is the way to go.

<div class="underlined"><a href="#">blah1</a></div>
<div class="underlined"><a href="#">blah1 asdfdf adfefef</a></div>

and

a:hover {
     text-decoration: none;   
}
a {
     text-decoration: none;   
}
.underlined{
    margin-bottom: 1px;
}
.underlined:hover
{
    margin-bottom: 0px;
    border-bottom: 1px solid black;
    width: 200px;
}

margin-bottom is to keep the size consistent when you add the border.

http://jsfiddle.net/bfV9t/

Answer 3

Not sure I understand, but here goes:

Remove the underline for links

a:link {
    text-decoration: none;
}

Add it back for links in hover state

a:hover {
    text-decoration: underline;
}