Pseudo-Elemente :before +::after für replaced elements

[Gunther]

Hi!

::after fügt am Ende des Element-Inhalts ein Pseudo-Element ein.
img sind aber leer, haben also keinen Inhalt, an dessen Ende ...

Ja, das ist_eine_mögliche [1]Interpretation.
Tatsächlich ist es aber ja so, dass "replaced elements" in der CSS Spezifikation gar nicht näher spezifiert werden:"An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet."

Folgerichtig werden also auch Pseudo-Elemente für replaced elements nicht spezifiziert.

Das hat in der Praxis zu unterschiedlichen Implementationen in den Browsern geführt.
In Webkit basierten Browsern "funktionieren" die Pseudo-Elemente für einige dieser Elemente.
Siehe u.a.: http://red-team-design.com/css-generated-content-replaced-elements/

AFAIK stehen die Chancen aber schlecht, dass dieses Verhalten offiziell in die Spec übernommen wird.

Von daher sollte man sich also auch nicht darauf verlassen, dass dies in Zukunft so bleibt. Und da es eh nicht in allen Browsern funktioniert, ist der Ansatz wenig hilfreich.

[1] Man könnte auch argumentieren, dass es sich ja nicht um eine Replace-Funktion handelt, es somit eigentlich egal ist, ob das entsprechende Element von Hause aus einen Inhalt hat oder nicht. Denn :before und :after fügen ja gerade Inhalte vor, bzw. nach dem jeweiligen Inhalt ein. Wenn ein Element also von Hause aus "leer" ist, stellt das ja erstmal vom Prinzip her kein Problem dar.

Gruß Gunther