Pourquoi le pseudo-élément CSS :after ne fonctionne-t-il pas sur tous les éléments HTML ?

Dévoilement des contraintes de la propriété CSS :after

Le pseudo-élément CSS :after ajoute du contenu après le contenu d'un élément dans le document arbre. Cependant, son applicabilité soulève des questions.

Element Restrictions

La spécification CSS indique que :after peut être appliqué au contenu avant ou après le contenu de l'arborescence d'un élément, apparemment sans restrictions. Pourtant, dans la pratique, certains éléments, tels que les images (), les entrées () et les tableaux (

Comprendre Éléments remplacés

La clé pour comprendre ce comportement réside dans le concept d'éléments remplacés. Les éléments remplacés sont ceux dont l'apparence et les dimensions sont définies par une ressource externe, y compris les images, les plugins et les éléments de formulaire.

:after et Éléments remplacés

Essentiellement , la spécification CSS indique explicitement que :before et :after ne fonctionnent qu'avec des éléments non remplacés. Par conséquent, les éléments remplacés comme et ne peut pas avoir les propriétés :after ou :before.

Considérations sur la structure DOM

Lors de l'utilisation de :before et :after avec des éléments non remplacés, la structure DOM ressemble à this :

Contenu de span

Pour les éléments remplacés comme les images, ceci la structure n'est pas réalisable, d'où l'incohérence du comportement.

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!