Underline part of hyperlink on hover

Question

I have a compound hyperlink that contains two span elements, one of which I want to underline on hover, and the other not. A good example of this is the name / username link pair found at the top of Twitter tweets. I just can't figure out how they do it.

My attempt:

HTML:

<a href="http://www.google.com">
<span class="main">My link</span>
<span class="caption"> and caption</span>
</a>​

CSS:

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.caption:hover {
    text-decoration:none; /* I want this to portion to not be underlined, but it still is */
}

​fiddle: http://jsfiddle.net/vgKSh/1/

Answer 1

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover span{
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a:hover span.caption {
    text-decoration:none;
}
​

Answer 2

You almost got it. Put text-decoration:underline; in main class only.

a {
    text-decoration:none;
    font-weight:bold;
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.main:hover {
    text-decoration:underline;
}

http://jsfiddle.net/vgKSh/9/

Answer 3

Forked and fixed here: http://jsfiddle.net/CtD8M/

Just have the specific span a set to text-decoration underline, rather than setting globally

Answer 4

Fiddle: http://jsfiddle.net/vgKSh/4/

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover span.main {
    text-decoration:underline;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a:hover span.caption {
    text-decoration:none;
}

Answer 5

a:hover span {
    text-decoration:none;            
}

a:hover .main{
    text-decoration: underline;            
}

Just as a style thing, I never use text-decoration but use border-bottom instead with a bit of padding.

Answer 6

a {
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    text-decoration:none;            
}
a span.caption {
    color:gray;
    font-weight:normal;
}
a span.main:hover {
    text-decoration:underline;
}