1

If you have a span with display prop set to inline-block and this span is nested into an anchor tag, the text in the span is not underlined.

But!

If you have a span with display prop set to block (or whatever just different from inline-block) and this span is nested into an anchor tag, the text in the span is being happy underlined.

Why?

The spec says text-decoration prop is not inherited. Why does it work when the span has display block?

.inlineblock {
  display: inline-block;
  color: red;
}

.block {
  display: block;
  color: green;
}

.inherit {
  /*   text-decoration: inherit */
}
<a class="inlineblock" href="wwww.google.com">Anchor tag has display: inline block, underlining works</a>
<br />
<br />

<a href="wwww.google.com"><span class="inlineblock inherit">Nested span has display: inline block, underlining doesn't work</span></a>
<br />
<br />

<a class="inlineblock" href="wwww.google.com"><span class="inlineblock inherit">Anchor tag and Nested span have display: inline block, underlining doesn't work</span></a>
<br />
<br />

<a href="wwww.google.com"><span class="block">Nested span has display: block, underlining works!!!</span></a>
<br />
<br />
mplungjan
  • 169,008
  • 28
  • 173
  • 236
pollx
  • 643
  • 9
  • 21
  • 1
    it's not inheritance but propagation. The quote of the accepted answer in the duplicate will give you the answer – Temani Afif Jul 22 '20 at 13:01
  • *When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline* https://www.w3.org/TR/CSS2/text.html#decoration – Temani Afif Jul 22 '20 at 13:02

0 Answers0