Pourquoi `:after` n'ajoute-t-il pas de contenu aux éléments remplacés ?

Pourquoi :after ajoute-t-il du contenu à certains éléments mais pas à d'autres ?

Le pseudo-élément CSS :after est destiné à ajouter du contenu après le contenu de l'arborescence de documents d'un élément. Cependant, il a été observé que cette fonctionnalité ne fonctionne de manière cohérente que pour certains éléments. Pour comprendre ce comportement, nous devons explorer le concept d'éléments remplacés.

Selon la spécification CSS, les éléments remplacés sont ceux dont l'apparence et les dimensions sont définies par une ressource externe, telle que des images, des plugins et un formulaire. éléments. En revanche, les éléments non remplacés sont ceux dont les caractéristiques visuelles sont contrôlées par CSS ou le style par défaut du navigateur.

Il est important de noter que :before et :after ne fonctionnent qu'avec des éléments non remplacés. Cela signifie que les images, les contrôles de formulaire remplacés et les autres éléments remplacés ne peuvent pas avoir de contenu ajouté à l'aide de ces pseudo-éléments.

La justification de cette restriction est que les éléments remplacés ont généralement une taille et une apparence prédéfinies, ce qui rend impossible l'insertion de contenu supplémentaire avant ou après eux. Au lieu de cela, les caractéristiques visuelles des éléments remplacés sont généralement contrôlées via leur code source ou leurs styles CSS.

Par exemple, le code HTML et CSS suivant ajoutera du contenu avant et après un élément de paragraphe, mais ne fonctionnera pas pour une image. :

<p><span>Before</span>Paragraph Content<span>After</span></p>
<img src="image.jpg"/><span>After Image</span>

p:before {
  content: "Before: ";
}

p:after {
  content: " After";
}

img:after {
  content: "After Image";
}

En comprenant le concept d'éléments remplacés, nous pouvons expliquer pourquoi :after fonctionne pour des éléments spécifiques mais pas pour d'autres, et il devient clair que le comportement est prévu et cohérent dans l'ensemble navigateurs.

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!