::before

Exemple interactif

a {
  color: blue;
  text-decoration: none;
}

a::before {
  content: "🔗";
}

.local-link::before {
  content: url("/shared-assets/images/examples/firefox-logo.svg");
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

<p>
  Des ressources d'apprentissage pour les développeurs web sont disponibles
  partout sur Internet. Essayez-les !
  <a href="https://web.dev/">web.dev</a>,
  <a href="https://www.w3schools.com/">w3schools.com</a> ou le
  <a href="https://developer.mozilla.org/" class="local-link">MDN web docs</a>.
</p>

Syntaxe

::before {
  content: /* valeur */;
  /* propriétés */
}

Description

Le pseudo-élément ::before est un bloc en ligne (inline box en anglais) générée en tant qu'enfant immédiat de l'élément auquel il est associé, ou l'« élément d'origine ». Il est souvent utilisé pour ajouter du contenu esthétique à un élément via la propriété content, comme des icônes, des guillemets ou d'autres décorations.

Les pseudo-éléments ::before ne peuvent pas être appliqués aux éléments remplacés tels que <img>, dont le contenu est déterminé par des ressources externes et n'est pas affecté par les styles du document actuel.

Un pseudo-élément ::before avec une valeur display de list-item se comporte comme un élément de liste et peut donc générer un pseudo-élément ::marker, tout comme un élément <li> le fait.

Si la propriété content n'est pas spécifiée, a une valeur invalide, ou a normal ou none comme valeur, alors le pseudo-élément ::before n'est pas rendu. Il se comporte comme si display: none était défini.

Par défaut, les pseudo-éléments ::before et ::after partagent le même contexte d'empilement que leur parent. Si aucun z-index n'est explicitement défini, le contenu généré par le pseudo-élément ::after apparaîtra au-dessus du contenu généré par le pseudo-élément ::before parce que ::after est rendu plus tard dans le flux DOM.

Accessibilité

Il est déconseillé d'utiliser un pseudo-élément ::before pour ajouter du contenu, car ce n'est pas toujours accessible de manière fiable aux lecteur·ice·s d'écran.

Exemples

Ajouter des guillemets

Un exemple d'utilisation des pseudo-éléments ::before est de fournir des guillemets. Ici, nous utilisons à la fois ::before et ::after pour insérer des caractères de citation.

HTML

<q>Quelques guillemets</q>, dit-il, <q>sont mieux que pas du tout</q>

CSS

q::before {
  content: "«";
  color: blue;
}

q::after {
  content: "»";
  color: red;
}

Résultat

Exemple décoratif

On peut mettre en forme du texte ou des images avec la propriété content à peu près de quelque manière que nous le voulions :

HTML

<span class="ribbon">Observez où est placée la boîte orange.</span>

CSS

.ribbon {
  background-color: #5bc8f7;
}

.ribbon::before {
  content: "Regardez cette boîte orange.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}

Résultat

Liste de choses à faire

Dans cet exemple, nous allons créer une liste de choses à faire en utilisant des pseudo-éléments. Cette méthode peut souvent être utilisée pour ajouter des touches subtiles à l'interface utilisateur et améliorer l'expérience utilisateur.

HTML

<ul>
  <li>Acheter du lait</li>
  <li>Promener le chien</li>
  <li>Faire de l'exercice</li>
  <li>Coder</li>
  <li>Jouer de la musique</li>
  <li>Se reposer</li>
</ul>

CSS

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #ccff99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}

JavaScript

const list = document.querySelector("ul");
list.addEventListener(
  "click",
  (ev) => {
    if (ev.target.tagName === "LI") {
      ev.target.classList.toggle("done");
    }
  },
  false,
);

Voici le code ci-dessus en action. Notez qu'aucune icône n'est utilisée, et que la coche est en fait le ::before qui a été stylisé en CSS. Allez-y et terminez quelques tâches.

Résultat

Séquences d'échappement Unicode

Comme le contenu généré est CSS, et non HTML, vous ne pouvez pas utiliser d'entités de balisage dans les valeurs de contenu. Si vous devez utiliser un caractère spécial et que vous ne pouvez pas l'entrer littéralement dans votre chaîne de contenu CSS, utilisez une séquence d'échappement unicode. Cela consiste en un antislash suivi de la valeur unicode hexadécimale du caractère.

HTML

<ul>
  <li>Cracker des œufs dans un bol</li>
  <li>Ajouter du lait</li>
  <li>Ajouter de la farine</li>
  <li aria-current="step">
    Mélanger soigneusement jusqu'à obtenir une pâte lisse
  </li>
  <li>Verser une louche de pâte dans une poêle plate chaude et graissée</li>
  <li>Faire frémir jusqu'à ce que le dessus de la crêpe perde son éclat</li>
  <li>La retourner et faire frémir encore quelques minutes</li>
  <li>Servir avec votre garniture préférée</li>
</ul>

CSS

li {
  padding: 0.5em;
}

li[aria-current="step"] {
  font-weight: bold;
}

li[aria-current="step"]::before {
  content: "\21E8 "; /* Séquence d'échappement Unicode pour une "Flèche blanche
                        vers la droite" */
  display: inline;
}

Result

Les pseudo-éléments imbriqués ::before::marker

Le pseudo-élément imbriqué ::before::marker sélectionne le marqueur de liste ::marker d'un pseudo-élément ::before qui est lui-même un élément de liste, c'est-à-dire qu'il a sa propriété display définie sur list-item.

Dans cette démo, nous générons des éléments de liste supplémentaires avant et après un menu de navigation en liste à l'aide de ::before et ::after (en les définissant sur display: list-item afin qu'ils se comportent comme des éléments de liste). Nous utilisons ensuite ul::before::marker et ul::after::marker pour donner à leurs marqueurs de liste une couleur différente.

HTML

<ul>
  <li><a href="#">Introduction</a></li>
  <li><a href="#">Débuter</a></li>
  <li><a href="#">Comprendre les bases</a></li>
</ul>

CSS

ul {
  font-size: 1.5rem;
  font-family: Arial, Helvetica, sans-serif;
}

ul::before,
ul::after {
  display: list-item;
  color: orange;
}

ul::before {
  content: "Début";
}

ul::after {
  content: "Fin";
}

ul::before::marker,
ul::after::marker {
  color: red;
}

Résultat

Bien que les puces de liste des trois éléments de navigation soient générées parce qu'il s'agit d'éléments <li>, « Début » et « Fin » ont été insérés via des pseudo-éléments et ::marker est utilisé pour styliser leurs puces.

Spécifications

Compatibilité des navigateurs

Voir aussi

• ::after
• content