The default CSS display value of content added via ::before or ::after pseudo-elements is inline.
According to the W3 spec, in a ::before or ::after pseudo-element declaration, non-inherited properties take their initial values. In case of the display property the initial value is inline. Therefore, when the display property is not explicitly defined for content inserted via ::before or ::after, it defaults to an inline box.
For example, the following will have its display property computed to inline as there's no display property specified explicitly:
a::after { content: ' ⭢'; }
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.