Maison > interface Web > tutoriel CSS > Pourquoi les pseudo-éléments `:before` et `:after` ne fonctionnent-ils pas avec les `` Elements ?

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

DDD
Libérer: 2024-12-19 01:36:17
original
700 Les gens l'ont consulté

Why Don't `:before` and `:after` Pseudo-elements Work with `` Elements?

Aborder la fonctionnalité des pseudo-éléments avec des éléments d'image

Dans une tentative d'améliorer la fonctionnalité, cette question explore pourquoi les pseudo-éléments comme :before et :after n'interagit pas avec les éléments d'image () comme ils le font avec d'autres balises telles que divs et spans. Pour illustrer le problème, considérons le HTML et le CSS suivants :

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt=""/>
Copier après la connexion
img:before {
  content: "hello";
}
Copier après la connexion

En examinant ce code dans des navigateurs comme Chrome 13 et Firefox 6, il devient évident qu'aucun changement attendu ne se produit avec l'élément image. Ce comportement contraste avec la compatibilité présentée par les éléments div et span.

En plongeant dans les spécifications, nous rencontrons cet extrait :

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.
Copier après la connexion

Cette déclaration suggère une définition incomplète de l'interaction entre les pseudo-éléments et des éléments d'image, impliquant leur incompatibilité actuelle. Pour plus d'informations sur cette question, reportez-vous à une autre réponse sur cette plateforme.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal