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?

Just figured it out, I just need to place main link text inside span and sub-link text outside link span like: `Link textsub-text` and CSS:`a:hover {text-decoration:none;} a:hover span {text-decoration:underline;}` This worked for me. — wzazza, Dec 30 '11 at 16:01
Related: [CSS text-decoration property cannot be overridden by child element](http://stackoverflow.com/questions/4481318/css-text-decoration-property-cannot-be-overridden-by-child-element) and [How do I get this CSS text-decoration override to work?](http://stackoverflow.com/questions/1823341/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. — BoltClock, Dec 30 '11 at 17:28

score 10 · Accepted Answer · answered Oct 15 '12 at 13:36

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

PM1625637 · Answer 2 · 2014-04-03T03:41:47.323

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

score 0 · Answer 3 · answered Jan 30 '17 at 12:40

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,

score -1 · Answer 4 · answered Jan 07 '12 at 11:25

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>

Text decoration for link and span inside this link

4 Answers4

Linked