::before crée un pseudo-élément qui sera le premier enfant de l'élément sélectionné. Généralement utilisé pour ajouter du contenu esthétique à un élément via la propriété CSS content, c'est un élément de type en-ligne par défaut.

/* 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

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

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

<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

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

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

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

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

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

Résultat

Notes

Malgré les corrections du positionnement dans Firefox 3.5, il n'est pas possible de générer du contenu comme un élément adjacent similaire (comme l'indique la spécification CSS « les pseudo-éléments :before et :after interagissent avec d'autres boîtes… comme s'ils étaient de nouveaux élément insérés à l'intérieur de leur élément associé. »).

HTML

<div class="example">
<span id="floatme">« Flottant avant » devrait être généré sur la gauche du viewport
et ne pas autoriser le débordement de cette ligne sur une nouvelle. De même « Flottant
après » apparaît sur la droite du viewport et ne permet pas de débordement de cette ligne.</span>
</div>

CSS

#floatme { float: left; width: 50%; }

/* Pour obtenir une colonne vide, indiquez simplement un code hexadécimal pour pour une espace insécable : \a0 en tant que contenu (utilisez \0000a0 lorsqu'à la suite d'une telle espace il y a des caractères) */
.example::before {
  content: "Flottant avant"; 
  float: left;
  width:25%
}
.example::after {
  content: "Flottant après";
  float: right;
  width:25%
}

/* For styling */
.example::before, .example::after, .first {
  background: yellow;
  color: red;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Pseudo-Elements Level 4
La définition de '::before' dans cette spécification.
Version de travail Pas de modification significative depuis la spécification précédente.
CSS Transitions Version de travail Les transitions peuvent être appliquées sur les propriétés de ce pseudo-élément.
CSS Animations Version de travail Les animations peuvent être appliquées sur les propriétés de ce pseudo-élément.
Selectors Level 3
La définition de '::before' dans cette spécification.
Recommendation Introduction de la syntaxe avec les deux deux-points.
CSS Level 2 (Revision 1)
La définition de '::before' dans cette spécification.
Recommendation Définition initiale avec une seule fois le caractère deux-points.

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple

Oui

Oui1

Oui

Oui1

1.52 3

11

9

81

7

41

4

41

Animation and transition support26 Oui4 Non Non Non
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple

Oui

Oui1

Oui

Oui1

Oui

Oui1

Oui

Oui1

?5.1 ?
Animation and transition support Oui Oui Oui4 Non Non ?

1. Supported as :before.

2. Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none.

3. Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position, float, list-style-* and some display properties.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : SphinxKnight,