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 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 :

RAGGETT, Dave ; LE, Hors ; JACOBS, Ian. Spécification HTML 4.01. W3C, . 13.8. La manière de spécifier un texte de remplacement

HICKSON, Ian ; BERJON, Robin ; FAULKNER, Steve, et al.. HTML 5. W3C, . 4.8.1.1 Requirements for providing text to act as an alternative for images

BOS, Bert ; ÇELIK, Tantek ; HICKSON, Ian, et al.. CSS 2.1 Specification. W3C, . 12.1. The :before and :after pseudo-elements

HICKSON, Ian. CSS3 Generated and Replaced Content Module. W3C, . 4.2. Inserting content into an element: the '::before' and '::after' pseudo-elements