When Does CSS :after Fail to Add Content After an Element?

Understanding the Restrictions of CSS :after on Certain Elements

The CSS :after pseudo-element is used to add content after an element's document tree content. While the CSS spec doesn't explicitly state any limitations, it has been observed that :after only works with certain elements.

Determining Element Compatibility

The key factor determining whether an element can accept a :after property is whether it is a replaced element. Replaced elements, such as images () and form inputs (), have their appearance and dimensions defined by external resources.

The CSS specification explicitly states that :before and :after only work with non-replaced elements. This means that replaced elements, such as:

Reasoning Behind the Restriction

The incompatibility stems from the fact that replaced elements are not rendered as part of the document tree. Instead, they are rendered as external objects, so it is not possible for the browser to insert additional content before or after them.

Example of DOM Structure

For non-replaced elements, such as divs or spans, :before and :after content can be inserted into the DOM structure. For example:

<span></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><before>Before Content</before>
Span Content
<after>After Content</after>