Pourquoi les éléments img, iframe et canvas n’acceptent aucun pseudo-element ?

Si vous avez déjà essayé d’ajouter des pseudo-éléments (::before et ::after) à des balises telles img, iframe ou encore canvas , vous aurez sûrement remarqué que ces derniers n’apparaissent pas…

Alors on pourrait se dire que pour une image, c’est normal, étant donné que c’est une balise auto-fermante.

Mais le problème ne vient pas de là !

Et quand on prend le cas d’une iframe par exemple, le comportement est encore plus étrange : le pseudo-élément est là, il existe dans l’arbre DOM, mais impossible de lui faire afficher quoi que ce soit…

La raison

Ce “problème” n’est ni un bug, ni un choix des navigateurs web, mais en réalité, c’est précisément décrit dans la spécification du CSS !

Tout simplement parce que ces trois balises sont ce que l’on appelle des “élément remplacés”

En effet, leur contenu est remplacé par une “ressource externe” à la page web d’origine :

• Une image pour <img>
• Un autre document web pour <iframe>
• Un tableau de pixels pour <canvas>

Ce qui signifie que leur contenu n’est pas pris en compte dans la modélisation du rendu du CSS.

L’élément en lui même peut bien sûr être stylisé, mais le style des enfants (pseudo ou non) est ignoré.

La partie de la spécification sur les éléments remplacés : https://www.w3.org/TR/CSS21/conform.html#replaced-element

Voilà pourquoi les pseudo-éléments ::before et ::after, même lorsqu’ils sont ajoutés au dom, ne sont jamais affichés, car ignorés !

La solution

Malheureusement il n’y a pas de solution magique, c’est une contrainte des navigateurs, et de la spécification CSS…

La seule solution viable est évidemment de rajouter un conteneur autour de l’élément d’origine, et ajouter des pseudo-élément au conteneur, pour enfin les faire apparaitre !