MichaelB MichaelB - 4 months ago 18
CSS Question

CSS, Inline-block display inside <anchor> tags

I added an anchor symbol right in front of every anchor in my document



a::after {
content: "\2693";
}

<a href="somewhere...">i am an anchor</a>





Now I don't want to include the pseudo element in the underlined text, so from digging around a little I learned that I cannot achieve this with
text-decoration
but somehow using
display: inline-block;
solves the problem



a::after {
content: "\2693";
display:inline-block;
}

<a href="somewhere...">i am an anchor</a>





Can anyone explain these results ?
I've been reading about
inline-block
display, but couldn't understand why it works in this case ..

Answer

Inline-block elements doesn't inherit text-underline from their parent. Test below code and you will understand:

<div style="color:red;text-decoration:underline">
  Div with underlined text
  <span style="display:inline-block;text-decoration:inherit;">Inline block span</span>
</div>

Remove the "text-decoration:inherit" from the span and underline is gone. So in order to get text-underline for child inline-block elements, you need to inherit it from parent.

EDIT: That's how it is. Text-decoration is not propagated to child elements in certain cases. Refer official W3C documentation : W3C Doc

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.

Hope that answers your question.