Text decoration for link and span inside this link

Question

I have links like:

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

When hovering I need that text inside span is not decorated with underline (but main link text is). Is it possible? I've tried:

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

This is not working.

Is there any solution for this?

Answer 1

Add link text (text you want to be decorated with underline) inside <span> and the sub-text outside as normal link text, like:
<a href="#"><span>Link text</span>sub-text</a>

To decorate Link text use:

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