text-decoration:none doesn't remove text decoration

Question

Consider the following code HTML:

<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 underline while the superscript [2] doesn't have the underline. But it so happens that the superscript is also getting the underline. What am i missing here??

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

score 6 · Accepted Answer · answered Aug 18 '11 at 20:23

6

If you think about it, the sup isn't underlined. but the span still is. Since the sup is inside the span, you see the underline which appears to be sup's underline.

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

You'll see that the id1 css does take precedence, but you still see the underline which is that of the span.

To solve it, have the sup outside of the span:

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

answered Aug 18 '11 at 20:23

Mrchief

75,126
20
142
189

I need a way around this. I don't mind if its webkit specific – sasidhar Aug 18 '11 at 20:26
I need the `sup` to remain inside the `span` while not having the underline. Possible? – sasidhar Aug 18 '11 at 20:28
You mean you can't rearrange the markup? I'm afraid you need a JS based solution then. – Mrchief Aug 18 '11 at 20:30
I would do fine with a js solution too. there is too much mess with the class of the `span`(updated by JS). So i would rather leave the markup as it is. – sasidhar Aug 18 '11 at 20:32
Are you using jQuery? If yes, the run this: `$('#id1').detach().insertAfter('span.c1');`. Let me know if you need a more generic solution (that doesn't rely on ids). http://jsfiddle.net/mrchief/DTpEa/25/ – Mrchief Aug 18 '11 at 20:38
doing that won't apply any styling of `id1` to the `c1` class :( http://jsfiddle.net/sasidhar/eVRY2/1/ – sasidhar Aug 18 '11 at 20:47
Here's an updated fiddle: http://jsfiddle.net/mrchief/eVRY2/2/. What I would advise is instead of styling by id, style the sup by a class. Then you can say: `$('#id1').detach().insertAfter('span.c1').removeClass().addClass('c1 c2');`. Demo: http://jsfiddle.net/mrchief/eVRY2/3/ – Mrchief Aug 18 '11 at 21:02
This seems to be a much cleaner approach.......... http://jsfiddle.net/sasidhar/eYXhx/1/ – sasidhar Aug 19 '11 at 12:18
@sasidhar: Was under the impression that you cannot change the markup. But now it seems that you _can_ and wanted to keep it within the span because you wanted the styles to follow. Had I known that, I'd not have suggested the JS way. :). Anyway, glad that you got it working the simple way! – Mrchief Aug 19 '11 at 14:20
It turns out that text-decoration is special, and doesn't cascade like everything else. – djsadinoff Jun 18 '12 at 07:52

score 2 · Answer 2 · answered Aug 18 '11 at 20:14

2

Here is a correct variant http://jsfiddle.net/rTUDN/

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

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

answered Aug 18 '11 at 20:14

Arsen K.

5,494
7
38
51

Y so? y can't the span element contain further elements? my actual code has more complex styling and is handled by js to add and remove different classes, so i am not interested in removing the superscript from the span – sasidhar Aug 18 '11 at 20:16
1

@sasidhar Text is treated in blocks and styling ignores sub-elements (for the most part). CSS3's `text-decoration-skip` is designed to deal with this, but it isn't really implemented yet. – Alex Churchill Aug 18 '11 at 20:22

score 1 · Answer 3 · answered Feb 05 '15 at 04:38

1

The trick is to add

display: inline-block;

to the object you want to not have the same text-decoration, as below:

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

answered Feb 05 '15 at 04:38

insaner

1,641
16
28

score 1 · Answer 4 · answered Aug 18 '11 at 20:42

1

How about underlining the sup in the same color as your background? The span would be underlined and the sup underlining would overlay it.

answered Aug 18 '11 at 20:42

James Alarie

11
1

score 1 · Answer 5 · answered Aug 19 '11 at 12:18

1

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

answered Aug 19 '11 at 12:18

sasidhar

7,523
15
49
75

score 0 · Answer 6 · edited May 23 '17 at 12:12

0

It turns out that text-decoration is special, (and especially annoying) in that it doesn't cascade like other properties.

See: How do I get this CSS text-decoration override to work?

edited May 23 '17 at 12:12

Community

1
1

answered Jun 18 '12 at 07:54

djsadinoff

5,519
6
33
40

text-decoration:none doesn't remove text decoration

6 Answers6

Linked