Remove underline from span inside anchor

Question

I have this HTML:

<ul>
<li>
    <ul>
        <li>
            <a href="#"> <span> Test </span> Link </a>
        </li>
    </ul>
</li>
</ul>

And this CSS:

ul li ul li span {

    text-decoration:none;
}

Why would the span inside the anchor still have underline?

In other words: How would I get all the text underlined, except the SPAN. Thanks

Mr. Alien · Accepted Answer · 2012-12-13T09:22:44.003

63

You need to target the anchor tag and not the span tag so use this

ul li ul li a {
    text-decoration:none;
}

Reason: text-decoration: underline; is applied to <a> tag by default browser stylesheet, so if you want to over ride it or if you want that none of the <a> tags on your website should have an underline than simply use this

a {
   text-decoration: none;
}

Edit: As I read your comment if you want your text to be underline except the text within <span> than use this

Demo

ul li ul li a {
    text-decoration:underline;
}

ul li ul li a span {
    text-decoration:none;
    display: inline-block;
}

edited Dec 13 '12 at 09:22

answered Dec 13 '12 at 09:06

Mr. Alien

153,751
34
298
278

31

+1 for 'display: inline-block' so that inner span tag no longer takes underline from parent block level element, thanks – Ben Sewards Nov 17 '14 at 22:19
9

Argh! Witchcraft! Can someone point at the spec that defines this behaviour? I would have tried a lot of random things before I tried changing the inner element's `display` property. – Neek Jun 19 '16 at 09:49

Sowmya · Answer 2 · 2012-12-13T09:18:00.160

1

Make tat span in class as a

a is the tag which takes default underline since it is a link but not span. So whatever is inside the a tag takes the underline automatically.

ul li ul li a{
    text-decoration:none;
}

DEMO

edited Dec 13 '12 at 09:18

answered Dec 13 '12 at 09:05

Sowmya

26,684
21
96
136

1

That does not quite answer the "why" part of the question. – Jeroen Dec 13 '12 at 09:07
But what if I want all the text EXCEPT the span to be underlined? – Hommer Smith Dec 13 '12 at 09:09
`ul li ul li a { text-decoration:none; } ul li ul li a span { text-decoration:underline; }` – Muhammad Talha Akbar Dec 13 '12 at 09:10
@AspiringAqib he is asking for the opposite scenario – Sowmya Dec 13 '12 at 09:13

score 1 · Answer 3 · answered Apr 15 '14 at 07:59

1

It should be

ul li ul li a {
text-decoration:none;
}
ul li ul li a:hover {
text-decoration:underline;
}

ul li ul li a span {
text-decoration:none;
display: inline-block;   
}

DEMO

answered Apr 15 '14 at 07:59

Animesh

1,005
10
20

score -3 · Answer 4 · edited Dec 13 '12 at 09:28

-3

It should be

ul li ul li a {

    text-decoration:none;
}

edited Dec 13 '12 at 09:28

Sirko

72,589
19
149
183

answered Dec 13 '12 at 09:06

Ruchira Shree

163
10

Can you please tell me what it was previuosly , cant see why you have edited , as per my remeberance it was this only ul li ul li a { text-decoration:none; } – Ruchira Shree Dec 13 '12 at 11:06
@Ruchira.. you can click on the `edited 3hrs` link above to view the previous edits. – Kent Pawar Dec 13 '12 at 13:55

Remove underline from span inside anchor

4 Answers4

Linked