Quand CSS :after ne parvient-il pas à ajouter du contenu après un élément ?

Comprendre les restrictions du CSS :after sur certains éléments

Le pseudo-élément CSS :after est utilisé pour ajouter du contenu après le document d'un élément contenu de l'arborescence. Bien que la spécification CSS n'indique explicitement aucune limitation, il a été observé que :after ne fonctionne qu'avec certains éléments.

Détermination de la compatibilité des éléments

Le facteur clé déterminant si un élément peut accepter une propriété :after, c'est s'il s'agit d'un élément remplacé. Les éléments remplacés, tels que les images () et les entrées de formulaire (), ont leur apparence et leurs dimensions définies par des ressources externes.

La spécification CSS indique explicitement que :avant et :après uniquement travailler avec des éléments non remplacés. Cela signifie que les éléments remplacés, tels que :

• 

ne peut pas avoir : après que du contenu leur ait été ajouté.

Le raisonnement derrière le Restriction

L'incompatibilité vient du fait que les éléments remplacés ne sont pas rendus dans le cadre de l'arborescence du document. Au lieu de cela, ils sont rendus en tant qu'objets externes, il n'est donc pas possible pour le navigateur d'insérer du contenu supplémentaire avant ou après eux.

Exemple de structure DOM

Pour les non -Les éléments remplacés, tels que divs ou spans, le contenu :before et :after peuvent être insérés dans la structure DOM. Par exemple :

<span></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><before>Before Content</before>
Span Content
<after>After Content</after>

Copier après la connexion

Conclusion

Le La propriété CSS :after est limitée aux éléments non remplacés en raison des caractéristiques inhérentes aux éléments remplacés. Cela garantit que le contenu rendu sur la page est cohérent et respecte les règles CSS spécifiées.

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!