The text design for the link and range within this link

Question

I have links like:

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

When hovering, I need the text within the range not to be underlined (but the main link text). Is it possible? I tried:

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

This does not work.

Is there any solution for this?

Answer 1

Add the link text (the text you want to underline) to the inside <span>, and the subtext outside, like regular link text, for example:
<a href="#"><span>Link text</span>sub-text</a>

To decorate the use of link text:

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

Answer 2

color border text-decoration. text-decoration: none, border-bottom .

style.css

a, a:link, a:visited
{
color: #11bad3;
text-decoration: none;
border-bottom: 1px solid #11bad3;
}

a:hover, a:active 
{
background: #00a9c2;
border-color: #00a9c2;
color: #fff;
}

print.css

a, a:link, a:visited 
{
border-bottom: 0px;
}

index.html

<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/css/print.css" type="text/css" media="print">

Answer 3

:

<a id="outer-link" href="#">
    Outer text <span id="inner-text">inner text</span> more outer text.
</a> 

<style>
    a { text-decoration: none; }
    #outer-link:hover { color: green; }
    #outer-link:hover #inner-text { color: red; }
</style>

Answer 4

, , , , , .

, text-decoration: , border-bottom: 1px solid # 000, border-bottom: none,