Pourquoi les pseudo-éléments: before Et: after ne fonctionnent-ils pas avec les éléments 'img'? [dupliquer]
Cette question a déjà une réponse ici:
- fait: avant de ne pas travailler sur les éléments img? 6 réponses
- CSS: après n'avoir pas ajouté de contenu à certains éléments 3 réponses
Je suis en train d'essayer 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";
}
Cela ne produit pas l'effet désiré (testé dans Chrome 13 et Firefox 6). Cependant, cela fonctionne avec un élément div ou span.
Pourquoi pas?
Existe-t-il un moyen de faire fonctionner les pseudo-éléments avec img éléments?
3 réponses
Remarque. Cette spécification ne définit pas complètement l'interaction de
:beforeet:afteravec les éléments remplacés (tels que IMG en HTML). Cela sera défini plus en détail dans une spécification future.
Je suppose que cela signifie qu'ils ne fonctionnent pas avec img éléments (pour l'instant).
Voir Aussi cette réponse.
Juste pour tester et savoir que ce n'est pas joli, vous pouvez faire ce qui suit pour faire fonctionner les pseudo-éléments avec les éléments 'img'.
Ajouter: display: block; content: ""; height: (height of image)px
à l'élément img dans votre CSS.
Bien qu'il rende votre tag img vide cause du content: "" vous pouvez alors
Ajouter: style="background-image: url(image.jpg)"
à votre élément img en html.
Testé dans Fx, Chrome et Safari
Il se peut que les fournisseurs de navigateurs n'aient pas implémenté de pseudo-éléments sur la balise img en raison de leur interprétation de la spécification: l'élément img, à proprement parler, n'est pas un élément de niveau bloc ou un élément en ligne, c'est un élément vide.