css - 此链接内链接和跨度的文本装饰

Question

我有这样的链接:

<a href="#">Link text<span>Link sub-text</span></a> 

悬停时我需要 span 内的文本没有用下划线装饰(但主链接文本是)。是否可以？ 我试过:

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

这是行不通的。

有什么解决办法吗？

Answer 1

在<span> 中添加链接文本(要用下划线装饰的文本)和外面的子文本作为普通链接文本，如:
<a href="#"><span>Link text</span>sub-text</a>

装饰链接文本使用:

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