Img + :before ou :after

Bonjour,
Je lance un sujet qui n'est pas tout à fait récent (je n'ai pas trouvé de fil de discussion dans l'historique d'alasacreations).

Les pseudo-classe :before et :after ne fonctionne pas avec la balise IMG sur les navigateurs récents (enfin j'ai juste testé sur chrome 13 + FF 5.0 + IE9), mais ça a été remonté sur bugzilla il y a un petit moment.

Et j'ai l'impression que ce n'est pas un bug mais une fonctionnalité voulue par les navigateurs mais j'ignore quelle est la raison.

Le W3C n'aidant pas avec leur exemple, vous en savez davantage sur le pourquoi du comment ?

Hello.

Contrairement à ce que l'on croit souvent, le contenu généré ne l'est pas après la balise, mais après son contenu.

p:after {content="blabla"}

génère le pseudo contenu

<p>Le contenu du p<span class="pseudo-element">blabla</span></p>

et pas

<p>Le contenu du p</p><span class="pseudo-element">blabla</span>

Du coup, pour toutes les balises autofermantes (img, mais c'est aussi le cas des input) et le contenu remplacé, la prise en charge de :before et :after n'est pas prévue par la spec.

Spec CSS2, content before/after a écrit :
Note. 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.

De tête, seul Opéra la propose, mais l'implémentation vient d'un choix de leur part.

Dans l'exemple que tu cites, il y a clairement contradictions entre les deux spec du coup.
Modifié par Florian_R (23 Sep 2011 - 13:12)

Ah d'accord.
Merci Florian_R, tu as été très clair dans tes explications.