Html 悬停时在超链接的部分下划线

我有一个包含两个span元素的复合超链接，其中一个我想在悬停时加下划线，另一个不加下划线。一个很好的例子是tweets顶部的name/username链接对。我就是不明白他们是怎么做到的

我的尝试：

HTML:

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

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 */
}

​小提琴：

a{ 文字装饰：无； 字体大小：粗体； } a:悬停跨度{ 文字装饰：下划线； } 标题{ 颜色：灰色； 字体大小：正常； } a:悬停span.caption{ 文字装饰：无； }

---

​ 你差点就成功了。放置

文本装饰：下划线仅在
main
类中

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

分叉并固定在此处：

只需将特定跨度a设置为文本装饰下划线，而不是全局设置
小提琴：

作为一种风格，我从不使用文字装饰，而是使用带边框的底部加上一些填充物。
谢谢佩蒂卡尔和其他人-2分钟内回答5个问题-喜欢这样的答案
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;
}

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

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

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

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