CSS — Pseudo-éléments

Mettez en forme une partie particulière ou générée d’un élément avec ::before, ::after, ::first-line ou ::marker. Gardez les noms, les états et les informations essentielles dans le HTML.

Un pseudo-élément CSS cible une partie particulière ou générée d’un élément, plutôt qu’un état de cet élément. ::before et ::after créent des boîtes supplémentaires. ::first-line et ::first-letter mettent en forme des fragments de texte. ::placeholder cible le texte indicatif d’un champ et ::marker le marqueur d’une liste. La syntaxe moderne utilise deux deux-points.

Créer une boîte avec ::before, ::after et content

Pour qu’une boîte ::before ou ::after soit générée, content doit avoir une valeur qui produit du contenu, même une chaîne vide comme content: "". Vous pouvez ensuite définir son display, ses marges ou son positionnement. Cette boîte ne crée pas un véritable bouton ; gardez le nom du contrôle dans le HTML plutôt que de compter uniquement sur le contenu généré.

.mode[aria-pressed="true"]::before {
  content: "✓";
  margin-inline-end: 0.5rem;
}
.quote::before { content: "“"; }
.quote::after { content: "”"; }

Cibler une partie d’un élément existant

::first-line et ::first-letter peuvent mettre en forme le début d’un paragraphe, avec un ensemble limité de propriétés. ::placeholder agit sur le texte indicatif d’un champ : celui-ci ne remplace pas un libellé. ::marker cible la puce ou le numéro d’un élément de liste. ::selection permet de personnaliser le texte sélectionné, en préservant son contraste.