CSSPseudo-éléments


Introduction

Les pseudo-éléments, tout comme les pseudo-classes, sont ajoutés à un sélecteur CSS, mais au lieu de décrire un état spécial, ils vous permettent d'étendre et de styliser certaines parties d'un élément HTML.

Par exemple, le pseudo-élément :: first-letter ne cible que la première lettre d'un élément de bloc spécifié par le sélecteur.

Syntaxe

  • selector :: pseudo-element {property: value}

Paramètres

pseudo-élément La description
::after Insérer du contenu après le contenu d'un élément
::before Insérer du contenu avant le contenu d'un élément
::first-letter Sélectionne la première lettre de chaque élément
::first-line Sélectionne la première ligne de chaque élément
::selection Correspond à la partie d'un élément sélectionnée par un utilisateur
::backdrop Utilisé pour créer une toile de fond qui masque le document sous-jacent pour un élément de la pile de la couche supérieure
::placeholder Vous permet de styliser le texte d'espace réservé d'un élément de formulaire (expérimental)
::marker Pour appliquer des attributs de style liste sur un élément donné (expérimental)
::spelling-error Représente un segment de texte signalé incorrectement par le navigateur (Expérimental)
::grammar-error Représente un segment de texte que le navigateur a identifié comme grammaticalement incorrect (Expérimental)

Remarques

  • Parfois , vous verrez doubles points ( :: ) au lieu d'un seul ( : ). Ceci est un moyen de séparer les pseudo-classes de pseudo-éléments, mais certains anciens navigateurs comme Internet Explorer 8 ne supporte que deux points simple ( : ) pour les pseudo-éléments.

  • On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Il doit apparaître après les sélecteurs simples dans la déclaration.

  • Les pseudo-éléments ne font pas partie du DOM et ne peuvent donc pas être ciblés par :hover ou d'autres événements utilisateur.

Pseudo-éléments Exemples Liés