Search code examples
htmlcsstext-decorations

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>

Solution

  • 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>