Qu'est-ce qu'un pseudo-élément?

L'élément pseudo en CSS est un mot-clé ajouté à un sélecteur, permettant de styliser une partie spécifique de l'élément sans créer explicitement des éléments DOM supplémentaires.

Les pseudo-éléments les plus couramment utilisés sont :

• ::before : Insère du contenu généré avant le contenu de l'élément sélectionné.
• ::after : Insère du contenu généré après le contenu de l'élément sélectionné.
• ::first-line : Applique des styles à la première ligne d'un élément de bloc.
• ::first-letter : Applique des styles à la première lettre d'un élément de bloc.
• ::selection : Applique des styles à la partie de l'élément sélectionnée par l'utilisateur (par exemple, lors de la sélection de texte avec la souris).
• ::placeholder : Applique des styles au texte de l'espace réservé dans les champs <input> ou <textarea>.

Exemple d'utilisation de ::before et ::after :

div::before {
  content: "Préfixe : "; // Propriété content obligatoire
  color: blue;
}

div::after {
  content: " Suffix"; // Propriété content obligatoire
  color: red;
}

Exemple d'utilisation de ::first-line et ::first-letter :

p::first-line {
  font-weight: bold;
}

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 0.1em;
}

Les pseudo-éléments sont utiles pour ajouter des éléments décoratifs, générer du contenu, styliser des parties du texte et d'autres tâches, simplifiant la structure HTML. Historiquement, ils commençaient par un seul deux-points (:), mais la spécification CSS3 a introduit deux deux-points (::) pour différencier les pseudo-classes (:hover, :focus) et les pseudo-éléments, bien qu'un seul deux-points soit encore supporté par la majorité des navigateurs pour les pseudo-éléments anciens. Il est recommandé d'utiliser ::.