The meaning of “replaced content” and why it’s ignored by CSS

I was catching up on Sime Vidas’ Web Platform News and came up on a post that explains why the ::before and ::after pseudo-elements do not work with form inputs and images.

The term “replaced content” was sprinkled in and, while Sime does a great job illustrating its effect on CSS, I was still confused by what it actually means.

So I looked it up and the spec has this to say:

An element whose content is outside the scope of the CSS formatting model, such as an image or embedded document. For example, the content of the HTML img element is often replaced by the image that its src attribute designates.

Cool. If I understand correctly, the idea is that an element is considered “replaced” if the thing that renders isn’t the element itself, but what an attribute in it refers to. The example the spec uses is an img element. The element itself has an intrinsic width and height (defined by those attributes) that give it physical dimensions, but what gets rendered is the file specified in the src attribute. That means the element is replaced by that image file.

And replaced elements replace all their contents. That includes pseudo-elements which will not be considered in the CSS formatting model.

I’m still not exactly sure how that applies to form inputs but it might be in this line in the spec:

User agents may consider a replaced element to not have any intrinsic dimensions if it is believed that those dimensions could leak sensitive information to a third party.

That would explain Sime’s point that Both Chrome and Safari actually support ::before and ::after on some form inputs, like checkboxes and radio buttons, but not others, like text and numeric inputs.

Source / Spec