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?

Stramonium

Just figured it out, I just need to place main link text inside span and sub-link text outside link span like: <a href="#"><span>Link text</span>sub-text</a> and CSS:a:hover {text-decoration:none;} a:hover span {text-decoration:underline;} This worked for me. – Stramonium

Related: CSS text-decoration property cannot be overridden by child element and How do I get this CSS text-decoration override to work? - these questions explain why text-decoration none inside the span doesn't work. So yes, your solution is pretty much the only way to get around this. – Noreen

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

Stramonium

Answer 2

A simple solution is to use the color and border properties, instead of text-decoration. You need to set text-decoration: none first, and then use border-bottom as the underline for all your links.

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">

Korea

Answer 3

I know this is an old post, but since I just had the same problem, and came up with a solution, I figured I would write it anyways.

Instead of trying using text-decoration: underline, instead just use border-bottom: 1px solid #000, this way, you can simply say border-bottom: none,

Pawpaw

Answer 4

Another solution is to use colors instead of underlines as your identifier:

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

Laws