web-dev-qa-db-fra.com

Pourquoi les pseudo-éléments before et: after ne fonctionnent-ils pas avec les éléments `img`?

J'essaie d'utiliser un :before pseudo-élément avec un élément img.

Considérez ce HTML et CSS ...

HTML

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />

CSS

img:before {
  content: "hello";
}

jsFiddle .

Cela ne produit pas l'effet souhaité (testé dans Chrome 13 et Firefox 6). Toutefois, cela fonctionne avec un élément div ou span.

Pourquoi pas?

Est-il possible de faire fonctionner les pseudo-éléments avec les éléments img?

csspseudo-elementcss-content
113
alex

La spécification dit ...

Remarque. Cette spécification ne définit pas complètement l'interaction de :before et :after avec des éléments remplacés (tels que IMG en HTML). Ceci sera défini plus en détail dans une spécification future.

Je suppose que cela signifie qu'ils ne fonctionnent pas avec les éléments img (pour le moment).

Voir aussi cette réponse .

118
alex

Juste pour tester et savoir que ce n'est pas joli, vous pouvez procéder comme suit pour que les pseudo-éléments fonctionnent avec les éléments 'img'.

Ajoutez: display: block; content: ""; height: (height of image)px à l'élément img dans votre CSS.

Bien que cela rende votre balise img vide à cause du content: "", Vous pouvez alors

Ajoutez: style="background-image: url(image.jpg)" à votre élément img en HTML.

Testé cela en Fx, Chrome et Safari

6
Ferdi Emmen

Les éditeurs de navigateurs n'ont peut-être pas implémenté de pseudo-éléments sur la balise img à cause de leur interprétation de la spécification: l'élément img, à proprement parler, n'est pas un élément de niveau bloc ni un élément inline , c’est un élément vide .

5
Joel Glovier