Introduction aux pseudo-éléments

Les pseudo-éléments en CSS sont utilisés pour styliser certaines parties d'un élément sans avoir à ajouter des balises HTML supplémentaires.

Les deux pseudo-éléments les plus courants sont ::before et ::after.

• ::before permet d'ajouter du contenu avant le contenu d'un élément.
• ::after permet d'ajouter du contenu après le contenu d'un élément.

Contenu obligatoire

Pour que ::before et ::after puissent exister dans le DOM, ils doivent obligatoirement avoir une propriété content. Sans cette propriété, ils ne s'afficheront pas.

Il est possible de lui donner un content vide, mais il doit être spécifié.

.exemple::before{
 content:"";
}

Exemple pratique

Supposons que nous ayons le HTML suivant :

<div class="example">Ceci est un exemple.</div>

Nous pouvons utiliser les pseudo-éléments ::before et ::after pour ajouter du contenu avant et après ce div.

CSS

.example {
  position: relative;
  padding: 10px;
  border: 1px solid #000;
}

.example::before {
  content: "Avant: ";
  color: red;
}

.example::after {
  content: " :Après";
  color: blue;
}

Dans cet exemple, ::before ajoute le texte "Avant: " en rouge avant le contenu du div

::after ajoute le texte "Après" en bleu après le contenu du div.