Why Doesn't `:after` Add Content to Replaced Elements?

Why Does :after Add Content to Some Elements but Not Others?

The CSS :after pseudo-element is intended to add content after an element's document tree content. However, it has been observed that this functionality only works consistently for certain elements. To understand this behavior, we need to explore the concept of replaced elements.

According to the CSS spec, replaced elements are those whose appearance and dimensions are defined by an external resource, such as images, plugins, and form elements. In contrast, non-replaced elements are those whose visual characteristics are controlled by CSS or the browser's default styling.

Importantly, :before and :after only work with non-replaced elements. This means that images, replaced form controls, and other replaced elements cannot have content added to them using these pseudo-elements.

The rationale for this restriction is that replaced elements typically have a pre-defined size and appearance, making it impractical to insert additional content before or after them. Instead, the visual characteristics of replaced elements are typically controlled through their source code or CSS styles.

For example, the following HTML and CSS will add content before and after a paragraph element, but will not work for an image:

<p><span>Before</span>Paragraph Content<span>After</span></p>
<img src="image.jpg"/><span>After Image</span>

p:before {
  content: "Before: ";
}

p:after {
  content: " After";
}

img:after {
  content: "After Image";
}

By understanding the concept of replaced elements, we can explain why :after works for specific elements but not others, and it becomes clear that the behavior is intended and consistent across browsers.

The above is the detailed content of Why Doesn't `:after` Add Content to Replaced Elements?. For more information, please follow other related articles on the PHP Chinese website!