user3909296 user3909296 - 11 days ago 8
CSS Question

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>




Answer

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>