:: avant / :: après - Astuces CSS

Les ::beforeet ::afterpseudo-éléments en CSS vous permet d'insérer du contenu sur une page sans avoir besoin d'être dans le code HTML. Bien que le résultat final ne soit pas réellement dans le DOM, il apparaît sur la page comme s'il l'était, et ressemblerait essentiellement à ceci:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Les seules raisons d'utiliser l'un sur l'autre sont:

Vous voulez que le contenu généré vienne avant le contenu de l'élément, en position.
Le ::aftercontenu est également «après» dans l'ordre des sources, il se positionnera donc au-dessus de :: before s'il est empilé les uns sur les autres naturellement.

Notez que le contenu est toujours à l'intérieur de l'élément auquel ils sont appliqués. Le nom donne l'impression qu'ils peuvent venir, vous savez, avant ou après l'élément, mais c'est vraiment avant ou après l'autre contenu à l'intérieur.

La valeur du contenu peut être:

Une chaîne: content: "a string"; - les caractères spéciaux doivent être spécialement encodés en tant qu'entité Unicode. Voir la page des glyphes.
Une image: content: url (/path/to/image.jpg.webp); - L'image est insérée à ses dimensions exactes et ne peut pas être redimensionnée. Étant donné que des éléments tels que les dégradés sont en fait des images, un pseudo élément peut être un dégradé.
Rien: contenu: «»; - Utile pour clearfix et insérer des images comme images d'arrière-plan (définir la largeur et la hauteur, et peut même redimensionner avec la taille d'arrière-plan).
Un compteur: content: counter(li); - Vraiment utile pour styliser les listes jusqu'à ce que: le marqueur arrive.

Notez que vous ne pouvez pas insérer du HTML (au moins, qui sera rendu au format HTML). content: "";

: contre ::

Chaque navigateur qui prend en charge la syntaxe double-deux-points (: :) CSS3 prend également en charge uniquement la syntaxe (:), mais IE 8 ne prend en charge que le simple-deux-points, donc pour l'instant, il est recommandé d'utiliser simplement le simple-deux-points pour une meilleure prise en charge du navigateur.

:: est le format le plus récent destiné à distinguer le pseudo contenu des pseudo-sélecteurs. Si vous n'avez pas besoin de la prise en charge d'IE 8, n'hésitez pas à utiliser le double-virgule.

En rapport

::Première ligne
::première lettre
Sélecteurs de pseudo-classes

Prise en charge du navigateur

Petits problèmes:

Firefox 3.5 ne permettrait pas le positionnement absolu de pseudo éléments.
Dans Opera 9.2, les espaces sont toujours affichés dans ce pseudo-élément comme s'il s'agissait de pretexte.
IE 8 ne prend pas en charge le z-index sur eux