Pourquoi les pseudo-éléments ne fonctionnent-ils pas avec les `` balises en CSS?

Pseudo-éléments et éléments d'image : une énigme CSS

Malgré l'applicabilité généralisée des pseudo-éléments comme :before et :after en CSS, leur la fonctionnalité avec des éléments d'image () est restée une exception déroutante. Comme le démontre l'extrait de code ci-dessous, l'ajout de pseudo-éléments à un élément img ne produit pas le résultat attendu :

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

img:before {
  content: "hello";
}

Bien que cela fonctionne de manière transparente avec d'autres éléments comme div et span, l'effet souhaité est absent lorsqu'il est appliqué aux éléments img.

Dans les coulisses : la spécification CSS

Le La spécification CSS met en lumière cet écart. Il indique explicitement que l'interaction entre les pseudo-éléments et les éléments remplacés, y compris img en HTML, n'est pas entièrement définie dans la version actuelle. Cela implique que la spécification actuelle ne précise pas le comportement des pseudo-éléments avec les éléments img.

Solution potentielle : en attente de normalisation

Cependant, cette situation ne peut pas persister indéfiniment. La spécification suggère que l'interaction entre les pseudo-éléments et les éléments remplacés sera définie plus en détail dans une version future. Cela nous laisse espérer que les pseudo-éléments seront éventuellement pris en charge pour les éléments img de manière plus complète et cohérente.

D'ici là, les développeurs cherchant à obtenir des effets similaires en utilisant des éléments img devront peut-être envisager des approches alternatives, telles que comme l'utilisation de JavaScript ou la création d'un élément wrapper supplémentaire autour de l'img.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!