Pourquoi ne pas :before et :after pseudo éléments de travail avec `img` éléments?

Question

Je suis en train d'utiliser un :before pseudo élément avec un img élément.

Considérez ceci en 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 désiré (testé dans Chrome 13 et Firefox 6). Cependant, il fonctionne avec un div ou span élément.

Pourquoi pas?

Est-il un moyen de faire des pseudo-éléments de travail avec img éléments?

Answer 1

La spécification dit...

Remarque. Cette spécification ne pas définir complètement l'interaction de l' :before et :after avec remplacée éléments (tels que des IMG en HTML). Ce sera définie plus en détail dans un futur cahier des charges.

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

Voir aussi cette réponse.

Answer 2

Il se pourrait que les éditeurs de navigateurs ont pas mis en œuvre des éléments pseudo sur l' img balise en raison de leur interprétation de la spécification: l' img élément, à proprement parler, n'est pas un bloc de niveau élément ou un élément inline, c'est un élément vide.

Answer 3

Juste pour le test et sachant que ce n'est pas assez, vous pouvez effectuer les opérations suivantes pour faire de la pseudo-éléments de travail avec 'img' éléments.

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

Cependant, il rendra votre balise img vide à cause de l' content: "" vous pouvez ensuite

Ajouter: style="background-image: url(image.jpg)" pour votre img élément html.

Testé ce dans le Fx, Chrome et Safari