Text-decoration: none does not remove text

Question

Consider the following HTML code :

<span class='c1'>Home<sup id='id1'>[2]</sup></span>

CSS

 .c1 { text-decoration:underline; } #id1 { text-decoration:none !important; } 

Now, I expected Home to have an underscore, while the superscript [2] does not have an underscore. But it so happened that the superscript also gets underscored. What am I missing here?

http://jsfiddle.net/sasidhar/DTpEa/

Answer 1

If you think about it, sup not stressed. but span is still there. Since sup is inside the span , you see an underscore that looks like sup underscore.

Consider this demo: http://jsfiddle.net/mrchief/DTpEa/24/

You will see that id1 css takes precedence, but you still see the underscore that matters span .

To solve this problem, use sup outside the span :

 <span class='c1'>Home</span><sup id='id1'>[2]</sup> 

Answer 2

Here is the correct option http://jsfiddle.net/rTUDN/

 <div> <span class='c1'>Home</span> <sup id='id1'>[2]</sup> </div> .c1 { text-decoration:underline; } #id1 { text-decoration:none; } 

Answer 3

How about underline sup in the same color as your background? A space will be underlined, and an underscore will overlap it.

Answer 4

http://jsfiddle.net/sasidhar/eYXhx/1/

Answer 5

It turns out that the text design is special (and especially annoying) in that it does not cascade like other properties.

See: How do I get text overrides to style CSS?

Answer 6

The trick is to add

 display: inline-block; 

to the object you want not to have the same textual design, as shown below:

 .c1 { text-decoration:underline; } #id1 { display: inline-block; text-decoration:none !important; }