0

There are a lot of questions in StackOverflow similar to this, but I wasn't able to find an answer to this simple question. Why the following code does not work as expected?

<pre style="text-decoration: underline;">
underlined
underlined
<span style="text-decoration: none;">should NOT be underlined</span>
underlined
</pre>
FedKad
  • 493
  • 4
  • 19

1 Answers1

1

Add display: inline-block to span.

<pre style="text-decoration: underline;">
underlined
underlined
<span style="text-decoration: none; display: inline-block">should NOT be underlined</span>
underlined
</pre>
Debsmita Paul
  • 1,442
  • 9
  • 22
  • 1
    Why do I need it? – FedKad Apr 09 '21 at 12:07
  • I don't know exactly why, but `text-decoration` property doesn't work on `inline` elements or at least doesn't work as expected. `span` element's default display property is `inline` so changing it to `inline-block` or `block` normally solves it. I have encountered this problem several times and this is how I solved it. – Debsmita Paul Apr 09 '21 at 12:11
  • 1
    Setting `display: inline-block;` alone (and removing `text-decoration: none;`) also removes the underline from the `span` element. This adds another mystery to this strange behavior! – FedKad Apr 09 '21 at 12:53
  • Wow yes it actually does. I'll try to find some explanation about it. – Debsmita Paul Apr 09 '21 at 14:32
  • @FedonKadifeli the duplicate contain the explanation – Temani Afif Apr 09 '21 at 14:54