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

Syntaxe

/* CSS3 syntax */
::before { style properties }

/* CSS2 syntax */
:before { style properties }

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.

CSS

q::before { 
  content: "«\00A0";
  color: blue;
}
q::after {
  content: '\00A0»';
  color: red;
}

HTML

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

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.

JavaScript

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

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: grey;
}

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;
}

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é. »).

<style type="text/css">
#floatme {float:left; width:50%;}

.example:before {
  content: "Flottant avant"; /* 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) */
  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;
}
</style>

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

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é Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:before (Oui) 1.0 (1.7 ou moins)[1] 8.0 4 4.0
::before (Oui) 1.5 (1.8)[1] 9.0 7 4.0
Prise en charge des animations et des transitions 26 4.0 (2.0) Pas de support Pas de support Pas de support
Fonctionnalité Android Chrome Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:before (Oui) (Oui) (Oui) ? ? ?
::before (Oui) (Oui) (Oui) 7.1 ? 5.1
Prise en charge des animations et des transitions 26 (Oui) 4.0 (4.0) Pas de support Pas de support Pas de support

[1] Avant la version 3.5, Firefox n'implémentait que la version CSS 2.0 de :before. Certaines propriétés ne pouvaient donc pas être utilisées (position, float, list-style-* et d'autres liées à l'affichage). Firefox 3.5 a retiré ces restrictions.

Voir aussi

Étiquettes et contributeurs liés au document

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