To What Self-Closing Elements Can ::before and ::after Pseudo-Elements be Applied

Question

I\'m particularly interested in understanding when the ::before and ::after pseudo-elements can be applied to self-closing tags. This is the defini

Answer 1

According to the CSS 2.1 spec,

This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

But the current draft of Selectors Level 3 only says

The ::before and ::after pseudo-elements can be used to describe generated content before or after an element's content. They are explained in CSS 2.1

CSS 2.1 defines replaced elements like this:

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet.

The content of replaced elements is not considered in the CSS rendering model.

According to MDN,

Typical replaced elements are <img>, <object>, <video> or forms element like <textarea>, <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases.

Therefore, using :before or :after with replaced elements will produce unreliable results.