Pseudo-éléments des images

Les pseudo-éléments :before et :after permettent de définir des boîtes de contenu avant et après l'élément HTML qui les porte. Alors qu'il est maintenant possible de leur appliquer de nombreuses règles de stylisation, leur utilisation n'est pas totalement standardisée (je ne parle pas des navigateurs qui ne les gèrent pas). C'est le cas des images.

Prenons par exemple deux de ces éléments, l'un avec une url valide, l'autre sans, et essayons d'afficher un contenu dans leurs pseudo-éléments :before et :after :

<img src="panda_rouge.png" alt="Texte alternatif" />
<img src="" alt="Texte alternatif" />
Code HTML des deux images, l'une avec url, l'autre sans.
img { 
    background: #fff; 
    border: 1px solid red; 
    padding: 2px;
}
img:before { 
    border: 1px solid green; 
    content: "before"; 
}
img:after { 
    border: 1px solid blue; 
    content: "after"; 
}
Styles appliqués aux deux images pour afficher leurs pseudo-éléments :before et :after.

Texte alternatif

Rendu des deux images avec les styles appliqués.

Qu'observe-t-on ?

  • Firefox 3.6.3 / 7
    • Si l'attribut src est défini (avec une url d'image valide), les pseudo-éléments ne sont apparemment pas créés/affichés.
    • Si l'attribut src est vide, alors le pseudo-élément :before est utilisé pour afficher le texte alternatif et le pseudo-élément :after est affiché.
  • Opera 10.10
    • Quel que soit le cas, les pseudo-éléments sont correctement affichés.
    • Dans le second cas, le texte alternatif est affiché entre les pseudo-éléments.
  • Chromium 5 / 12
    • Les pseudo-éléments ne sont pas affichés dans les deux cas.
    • Pire, si l'attribut src est vide, le texte alternatif ne semble pas être affiché.

Si nous jetons un œil aux spécifications du W3C, on remarque que l'usage des pseudo-éléments n'est pas vraiment défini pour les éléments comme les images dont le contenu est remplacé :

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.

spécification CSS2.1

Je n'ai pas trouvé plus de détails dans le module CSS3 correspondant, ni dans les spécifications HTML. A l'heure actuelle, aux vues des quelques tests menés, il semble donc que seul Opera rende correctement les pseudo-éléments :before et :after des images (« correctement » dans le sens « de la même manière que pour les autres éléments »).

Pour en savoir plus :

Titre
Spécification HTML 4.01
Chapitre
13.8. La manière de spécifier un texte de remplacement
Auteurs
Raggett DAVE
Auteurs
Le Hors ARNAUD
Auteurs
Jacobs IAN
Editeur
W3C
Date
Titre
HTML 5
Chapitre
4.8.1.1 Requirements for providing text to act as an alternative for images
Auteurs
Hickson IAN
Auteurs
Berjon ROBIN
Auteurs
Faulkner STEVE
Auteurs
Leithead TRAVIS
Auteurs
Doyle Navara ERIKA
Auteurs
O'Connor EDWARD
Auteurs
Pfeiffer SILVIA
Editeur
W3C
Date
Titre
CSS 2.1 Specification
Chapitre
12.1. The :before and :after pseudo-elements
Auteurs
Bos BERT
Auteurs
Çelik TANTEK
Auteurs
Hickson IAN
Auteurs
Wium Lie HÅKON
Editeur
W3C
Date
Titre
CSS3 Generated and Replaced Content Module
Chapitre
4.2. Inserting content into an element: the '::before' and '::after' pseudo-elements
Auteurs
Hickson IAN
Editeur
W3C
Date