Formation Apprendre le CSS : Les pseudo éléments

Dans ce chapitre, on va découvrir le principe des pseudo-éléments. Ils permettent de cibler une partie d'un élément ou de générer un contenu visuel sans avoir besoin d'ajouter un nouvel élément dans le HTML.

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

Un pseudo-élément permet de cibler une partie d'un élément HTML et set met à la suite d'un sélecteur classique avec ::.

Par exemple :

input::placeholder {
  color: red;
}

Ici, on ne cible pas l'input lui-même, mais uniquement son placeholder (texte par défaut à l'intérieur). Il existe de nombreux pseudo éléments mais je vous propose de découvrir les principaux.

::placeholder

Il permet de changer le style du texte indicatif affiché dans les champs de formulaire.

input::placeholder {
  color: gray;
}

::selection

Il permet de changer le style du texte lorsqu'il est sélectionné par l'utilisateur.

::selection {
  background: green;
  color: yellow;
}

Par défaut, le navigateur applique généralement un fond bleu avec du texte clair. Avec ::selection, on peut personnaliser ce rendu.

::before et ::after

Les 2 pseudo éléments ::before et ::after permette de styliser le contenu avant ou après un élément.

Prenons un exemple simple avec une liste :

li::before {
  content: "- ";
}

Ici, on ajoute un tiret devant chaque élément de liste sans toucher au HTML.

Avec ces 2 pseudo éléments il faudra nécessairement utiliser la propriété content (sinon l'élément ne s'affiche pas). Cette propriété permet d'afficher du texte avant ou après l'élément (mais peut aussi être laissé vide)

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

Une fois créé, un pseudo-élément peut recevoir presque toutes les propriétés CSS habituelles :

li::before {
  content: "- ";
  color: green;
  margin-right: 0.5rem;
}

Par défaut, ::before et ::after se comportent comme des éléments inline. Si on veut leur donner des dimensions, il faut changer la valeur du display.

.block::before {
  content: "";
  display: block;
  width: 100px;
  height: 4px;
  background: green;
}

Les compteurs

Le pseudo-éléments ::before se combine très bien avec les compteurs CSS qui permettent d'incrémenter une valeur.

Prenons une liste ordonnée. On peut générer les numéros automatiquement avec :

ol li::before {
  content: counter(ol);
  margin-right: 0.5rem;
}

Mais pour que le compteur s'incrémente, il faut aussi préciser :

ol li {
  counter-increment: ol;
}

Et pour le réinitialiser à chaque nouvelle liste :

ol {
  counter-reset: ol;
}

Ainsi, on obtient un affichage du type :

• 1.
• 2.
• 3.

Récupérer un attribut HTML avec attr()

Dans la propriété content, on peut aussi récupérer la valeur d'un attribut HTML grâce à attr().

Par exemple :

<li data-title="demo">Premier élément</li>

Puis :

li::before {
  content: attr(data-title);
}

Le pseudo-élément affichera alors la valeur de data-title (si l'attribut n'existe pas, rien ne sera affiché).