CODEWITHSUNDEEP
htmlcsstext-decorations
Stefan
Stefan

Reputation: 1730

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

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>

Upvotes: 6

Views: 3008

Answers (3)

Danield
Danield

Reputation: 125493

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>

Upvotes: 12

Fenici
Fenici

Reputation: 461

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>

Upvotes: 1

Abood
Abood

Reputation: 570

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>

Upvotes: 6

Related Questions