::before
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since juillet 2015.
Le pseudo-élément CSS ::before
crée un pseudo-élément qui sera le premier enfant de l'élément ciblé. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS content
. Par défaut, l'élément créé est de type en-ligne (inline en anglais).
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.
Note :
La spécification Selectors Level 3 a introduit la notation à double deux-points ::before
pour distinguer les pseudo-classes des pseudo-éléments. Les navigateurs acceptent également la notation à un seul deux-points :before
, introduite dans CSS2.
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.
Accessibility
Using a ::before
pseudo-element to add content is discouraged, as it is not reliably accessible to screen readers.
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
Specification |
---|
CSS Pseudo-Elements Module Level 4> # generated-content> |
Compatibilité des navigateurs
Loading…