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