Les pseudo-éléments ::before et ::after en CSS

Lorsque l'on fait de l'intégration web, il est parfois facile d'oublier que chaque balise HTML vient avec une sémantique particulière, et même si le juste milieu n'est pas évident à trouver, inonder une page de balise pour simplement arriver à intégrer un design correctement peut avoir des conséquences négatives, telles que :

• Donner une sémantique incorrecte aux outils d'accessibilité numérique (lecteurs d'écrans par exemple)
• Augmenter drastiquement le ratio code/contenu, impactant l'optimisation du référencement naturel

Pour optimiser cela, il faut séparer deux types d'objets web : le contenu véhiculant une information, et les illustrations purement décoratives.

Par exemple une simple forme, une icône ou même une image présente pour rendre l'interface jolie à regarder n'aura pas besoin d'être présente sous la forme d'un élément directement intégrée dans la page, on utilisera donc deux pseudo-element particulièrement adaptés : ::before et ::after.

Les pseudo-éléments

Les pseudo-éléments sont des sélecteurs en CSS qui permettent de sélectionner une partie "virtuelle" d'un élément qui n'est pas présent en tant qu'élément réel dans la page HTML.

On pense par exemple au sélecteur ::placeholder d'un champ de texte

Mais il existe deux pseudo-éléments "::before" et "::after" qui ne cible pas une partie d'un élément existant, mais permettent en réalité de générer ces éléments "virtuels" lors de l'interprétation du CSS uniquement.

Une fois déclarés, ces pseudo-éléments sont générés en tant qu'enfants directs de l'élément, il ne peuvent donc pas être générés à l'intérieur d'éléments simples du type ou par exemple.

La syntaxe

Prenons un élément de texte assez simple que nous allons configurer pour être facilement ciblé avec notre sélecteur, comme ceci :

<p>
  Sa majesté, l'altesse royale :
  <span class="has-crown">Elisabeth II</span>
</p>

Alors pour générer notre pseudo-élément, nous allons simplement devoir le cibler avec ::before, lui assigner un contenu et c'est à partir de ce moment-là qu'il sera généré et visible.

À noter : si vous souhaitez simplement dessiner avec un pseudo-élément sans lui assigner de contenu, vous devrez quand même indiquer son attribut content:"" sous peine que ce dernier ne soit pas généré ou pas visible.

span.has-crown {
  position: relative;
}

span.has-crown::before {
  content: "";
  position: absolute;
  display: inline-block;
  top:-12px;
  left: -8px;
  transform: rotate(-30deg);
}

Ici nous venons styliser notre ::before comme n'importe quel autre élément, en gardant en tête qu'il sera inséré comme enfant du span.has-crown, donc il ne se positionnera correctement en absolue que si son parent est lui-même en relatif.

Et voilà le résultat :

Sa majesté, l'altesse royale : Elisabeth II

Si vous ouvrez l'inspecteur web de votre navigateur, vous verrez que le pseudo-element est inséré comme dans l'exemple ci-dessous :

<p>
  Sa majesté, l'altesse royale :
  <span class="has-crown">
    ::before
    Elisabeth II
  </span>
</p>

::before, ::after, quelle différence ?

Ces deux pseudo-éléments fonctionnent exactement de la même manière, et la seule différence entre les deux réside dans leur placement par rapport aux enfants de l'élément en question.

Comme vous l'aurez deviné, ::before se situe toujours avant le premier élément enfant, et ::after après le dernier élément, peu importe que des éléments soient retirés ou insérés dynamiquement en Javascript, ::before et ::after encadrerons toujours les autres enfants.

À noter que cette différence n'a d'impact que lorsque les pseudo-éléments sont positionnés de manière relative.

Pour aller plus loin

Si vous voulez un exemple d'utilisation simple pour ajouter des éléments graphiques avec ::before et ::after, je vous invite à lire mon tutoriel sur le CSS avancé dans lequel je les utilise.

Et je vous invite à découvrir les autres pseudo-elements disponibles en CSS directement sur la documentation MDN de Mozilla !