What's the Default Display Value of Content Added via CSS ::before or ::after?

Display value of CSS ::before / ::after content

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: ' ⭢'; }

Hope you found this post useful. It was published . Please show your love and support by sharing this post.