::before (:before)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

::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).

css
/* On ajoute un coeur avant les liens */
a::before {
  content: "♥";
}

Note : Les pseudo-éléments générés par ::before et ::after sont contenus dans la boîte de mise en forme de l'élément. Aussi, ::before et ::after ne s'appliquent pas aux éléments remplacés tels que <img> ou <br>.

Syntaxe

Error: could not find syntax for this item

La notation ::before a été introduite par CSS 3 pour différencier les pseudo-classes et les pseudo-éléments. Les navigateurs acceptent aussi la notation :before introduite par CSS 2.

Exemples

Ajouter des guillemets

Un exemple simple utilisant les pseudo-éléments pour ajouter des guillemets. Ici nous avons ::before et ::after pour effectuer l'insertion.

HTML

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

CSS

css
q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

Résultat

Exemple décoratif

Il est possible de mettre du style à du texte ou des images, dans la propriété content , quasiment de n'importe quelle manière.

HTML

html
<span class="ribbon">Observez où est placée la boite orange.</span>

CSS

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

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

Résultat

Liste de choses à faire

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

HTML

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

css
li {
  list-style-type: none;
  position: relative;
  margin: 1px;
  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

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

Résultat

Spécifications

Specification
CSS Pseudo-Elements Module Level 4
# generated-content

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::before
Animation and transition support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Voir aussi