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

Why Doesn't the CSS :after Pseudo-element Work on All HTML Elements?

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 (

), présentent un comportement variable.

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!

source：php.cn

Article précédent：Comment résoudre les chemins d’image dans les bundles de styles MVC4 ? Article suivant：Comment puis-je aligner verticalement des éléments dans une division de conteneur ?

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2205

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2354

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1971

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...