Why does the text-decoration: none not work inside p?

Question

I have the following HTML and CSS snippet and I want the "!" not to be underlined, but it is. What am I doing wrong?

p {
  color:red; 
  text-decoration: 
    underline; 
  font-size: 1.2em;
}

span.none {
  text-decoration: none;
}

<p class="p">Click the thumb<span class="none">!</span></p>

Answer 1

add display:inline-block; to span.none class

p {
  color:red; 
  text-decoration: 
    underline; 
  font-size: 1.2em;
}

span.none {
  text-decoration: none;
  display:inline-block;
}

<p class="p">Click the thumb<span class="none">!</span></p>

Answer 2

Why does the text-decoration: none not work inside p?

tldr; When text decorations are propogated to their descendant elements they can't be undone, however in certain situations they don't get propogated to their descendants.

This exact example is documented on MDN: (emphasis mine)

Text decorations draw across descendant elements. This means that it is not possible to disable on a descendant a text decoration that is specified on one of its ancestors.

For example, in the markup:

<p>This text has <em>some emphasized words</em> in it.</p>,

the style rule p { text-decoration: underline; } would cause the entire paragraph to be underlined. The style rule em { text-decoration: none; } would not cause any change; the entire paragraph would still be underlined.

However, sometimes text decorations don't propagate to their descendant elements - see the W3C spec on 'text-decoration' property

Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

So this means that if the span element has

1) display: inline-block, or

2) is floated or

3) is abolutely positioned then

the text decorations are not propagated to it in the first place. (which also means that text-decoration: none; isn't necessary)

p {
  color:red; 
  text-decoration: 
    underline; 
  font-size: 1.2em;
}

span.none {
  display: inline-block;
}

<p class="p">Click the thumb<span class="none">!</span></p>

Answer 3

Quick Fix, but ugly one, But do the trick. hope some one else come up with better answer.

p {
   color:red; 
   text-decoration: underline; 
   font-size: 1.2em;
}
p { 
   display: inline 
}
p.none {
   text-decoration: none;
}

<p class="p">Click the thumb</p><p class="none">!</p>