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 (<img>) and form inputs (<input>), 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:<ul> <li><img src="image.jpg" /></li><li><input type="text" /></li></ul>cannot have :after content added to them.

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:<pre><span>

<before>Before Content</before>
Span Content
<after>After Content</after>

</span></pre>

Conclusion

The CSS :after property is restricted to non-replaced elements due to the inherent characteristics of replaced elements. This ensures that the rendered content on the page is consistent and adheres to the specified CSS rules.

The above is the detailed content of When Does CSS :after Fail to Add Content After an Element?. For more information, please follow other related articles on the PHP Chinese website!