Why Doesn't CSS `:after` Add Content to Replaced Elements Like Images and Inputs?

CSS :after Not Adding Content to Certain Elements

The CSS :after property is used to insert content after an element in the document tree. However, it seems to work only with specific elements, such as paragraphs (

) and tables (

What Determines the Acceptability of :after and :before Properties?

The behavior of :after and :before is governed by the fact that replaced elements function differently. Replaced elements are those whose appearance and dimensions are defined by an external resource, such as images, plugins, and form elements.

According to the CSS specification, :before and :after only work with non-replaced elements. This means that they cannot be used to add content before or after replaced elements.

Example with Span

Consider the following HTML:

<span>Content of span</span>

With the following CSS:

span:before {
  content: "Before";
}

span:after {
  content: "After";
}

The DOM for this scenario looks like this:

<span>
  <before>Before</before>
  Content of span
  <after>After</after>
</span>

This structure demonstrates how :before and :after can insert content before and after a non-replaced element.

Exception with Image

However, using :after with an image does not yield the same result:

<img src="image.png" />

img:after {
  content: "After";
}

This is because :after cannot alter the appearance of a replaced element.

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