此链接内的链接和跨度的文本修饰

Question

我有以下链接:

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

当悬停我需要跨度内的文本没有下划线(但主链接文本是).可能吗？我试过了:

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