Cours CSS / Pseudo-éléments : ::before et ::after

Les pseudo-éléments CSS stylisent une partie particulière d'un élément ou créent une boîte uniquement pour la présentation. ::before et ::after peuvent ajouter du contenu décoratif, mais les informations essentielles doivent rester dans le HTML plutôt que de dépendre du contenu généré.

Distinguer les pseudo-classes et les pseudo-éléments

Une pseudo-classe sélectionne un élément existant selon son état ou une condition, comme l’explique le cours sur les combinateurs et les pseudo-classes. a:hover cible le lien lui-même lorsque le pointeur le survole. Un pseudo-élément cible une partie spécifique de l'élément ou de sa représentation créée. a::after décore un pseudo-élément créé après le contenu du lien. Dans un nouveau code, utilisez un seul deux-points pour les pseudo-classes et deux deux-points pour les pseudo-éléments afin de faciliter la distinction entre les deux.

a:hover { color: #1d4ed8; }
a::after { content: ""; }

::before et ::after n’ajoutent pas de véritables balises HTML sœurs à l’extérieur de l’élément sélectionné. Ils créent des boîtes avant et après son contenu. Les outils de développement peuvent afficher les pseudo-éléments comme des lignes séparées, mais ce n'est pas la même chose que d'avoir des spans écrits dans le HTML d'origine. Vous ne pouvez pas simplement récupérer des pseudo-éléments créés par du code qui cherche des éléments enfants ordinaires.

Comprendre le contenu et l'affichage

h1::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
}

content: "" crée un pseudo-élément sans texte. Même si le contenu est vide, il peut apparaître comme un carré décoratif si vous lui donnez un arrière-plan et une taille. En revanche, si le contenu est omis ou changé en none, ce pseudo-élément n'est pas créé et le point n'apparaît pas même si la taille et l'arrière-plan sont ajoutés.

L'affichage par défaut de ::before et ::after est en ligne. Utilisez inline-block pour un point décoratif qui nécessite une largeur et une hauteur explicites, et block pour une ligne sous le contenu. Pour ces pseudo-éléments, omettre content ou le définir à none empêche la création de la boîte générée. Pour plus de détails, voir display : blocs, éléments en ligne, inline-block et masquage. Voir MDN: ::before.

currentColor est un mot-clé qui se réfère à la valeur de couleur de l'élément, c'est-à-dire la couleur actuelle du texte. Si vous changez le titre du vert au bleu, le fond du pseudo-élément utilisera également la même couleur. border-radius: 50% arrondit les coins des boîtes de même largeur et hauteur pour les faire ressembler à des cercles. margin-right est l'espace extérieur entre les points et les lettres.

Ajoutez un point avant un titre et une ligne après un lien

L'exemple complet suivant crée un point de 12px avant le titre et une ligne de 2px sous le lien. Il laisse également le soulignement par défaut sur le lien lui-même, de sorte que la séparation du lien est maintenue même si la ligne supplémentaire disparaît. Au survol de la souris ou au focus clavier, les lignes décoratives deviennent plus épaisses, atteignant 4px.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; color: #333; }
    h1 { color: #087f5b; font-size: 30px; }
    h1::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      background-color: currentColor;
    }
    a { display: inline-block; color: #087f5b; text-decoration: underline; }
    a::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: 4px;
      background-color: currentColor;
    }
    a:hover::after, a:focus-visible::after { height: 4px; }
    a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 4px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>We open at 9 a.m. every day.</p>
  <a href="#visit">Visitor Information</a>
  <h2 id="visit">What to bring</h2>
  <p>Bring a water bottle and comfortable shoes.</p>
</body>
</html>

Enregistrez-le sous index.html et exécutez-le. Le titre conserve le texte réel « Small Garden » et le cercle devant est une décoration CSS. Le lien a également le nom « Visitor Information » et une adresse de destination dans le HTML. a:hover::after est une expression qui sélectionne le pseudo-élément ::after d’un lien a survolé. Les notations longues semblent moins compliquées si vous les lisez séparément par le nombre de deux-points et l'ordre de sélection.

Le diagramme illustre le même HTML avec et sans les pseudo-éléments décoratifs. Le texte et la destination du lien restent inchangés. Dans l'exemple complet, la ligne de lien décorative mesure 2px de hauteur par défaut et devient 4px au survol ou lors du focus clavier visible.

Conserver les informations essentielles dans le HTML

Différents lecteurs d'écran et navigateurs peuvent afficher le contenu généré différemment, donc ne comptez pas sur le fait de mettre des informations essentielles uniquement dans les pseudo-éléments. Il est plus clair d'écrire les conditions dans le libellé réel ou la phrase d'instruction que d'informer des conditions d'entrée avec content: "Required". Le simple fait qu'un pseudo-élément soit visible ne confirme pas son accessibilité.

Il vaut mieux ne pas se fier à l'implémentation générale de la décoration consistant à ajouter ::before et ::after aux éléments qui affichent un contenu externe, comme img. Appliquez-le aux éléments contenant du contenu, comme h1 ou a, comme dans cet exemple. Si vous avez besoin d'une décoration autour de l'image, vous pourriez envisager d'avoir un élément HTML séparé entourant l'image et de décorer les pseudo-éléments de cet élément.

Diagnostiquer les pseudo-éléments manquants

1. Remplacez content: ""; dans h1::before par content: none;. Le texte du titre doit rester le même, mais seul le point doit disparaître. Après confirmation, rétablissez-le en une chaîne vide.
2. Remplacez display: inline-block; dans le point par display: inline;. Remarquez que les décorations en ligne sans texte ne peuvent pas maintenir le point original de 12px avec uniquement la largeur·hauteur. Revenez à inline-block.
3. Changez la couleur de h1 en #1d4ed8. Assurez-vous que les points soient également colorés en bleu et que les liens restent verts. currentColor ne fait pas référence à une seule couleur sur toute la page.
4. Survolez le lien avec la souris et voyez si la ligne devient plus épaisse. Éloignez la souris et utilisez Tab pour déplacer le focus sur le lien et vérifiez si la ligne et le contour sont visibles ensemble.

Lors de la vérification, vérifiez d'abord si le sélecteur correspond à l'élément réel et si le contenu est valide, puis examinez l'affichage, la taille et l'arrière-plan. Si vous changez la hauteur de la ligne de lien à 0, la ligne ne sera pas visible, mais le pseudo-élément lui-même créé comme contenu ne disparaîtra pas nécessairement. Distinguer entre « l'élément n'a pas été créé » et « il a été créé mais n'a pas de zone de dessin » peut vous aider à déterminer la cause de l'échec.

Après l'exercice, restaurez les valeurs originales et enregistrez. Les pseudo-éléments peuvent fournir de la décoration sans éléments HTML supplémentaires, mais le contenu essentiel doit rester disponible indépendamment de cette décoration. Commencez par un point ou une ligne et vérifiez que le texte réel, la destination du lien et le comportement au clavier restent intacts.