:before | ::before

Résumé

: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, en utilisant la propriété CSS content. C'est un élément de type en-ligne par défaut.

Syntaxe

element:before { propriétés de style }  /* Syntaxe CSS2 */

element::before { propriétés de style }  /* Syntaxe CSS3 */

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

Ajout 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'UI 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>Relax</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;
}

Ci-dessous, vous pouvez voir le resultat du code ci-dessus. Notez qu'il n'y a pas d'icons, la marque est genérée en css avec le ::before. Allez-y, marquez certaines taches comme effectuées.

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 la spécification CSS le dit « les pseudo-éléments :before et :after intéragissent avec d'autres boîtes… comme s'ils étaient de nouveaux élément insérés à l'intérieur de leur élément associé. »), ils peuvent être utilisés pour améliorer les mises en pages sans tableaux (par ex. pour centrer un élément), tant que le contenu à centrer est un élément enfant, une colonne avant et après le contenu peuvent être introduits sans ajouter des éléments de même niveau (c. à. d. qu'il est probablement plus sémantiquement correct d'ajouter un span comme ci-dessous, qu'il ne le serait d'ajouter un div vide avant et après). (Il faut garder à l'esprit d'indiquer une largeur à un élément flottant, sinon il ne flottera pas !)

<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 Statut Commentaire
CSS Transitions Working Draft Permet les transitions sur les propriétés définies sur les pseudo-éléments.
CSS Animations Working Draft Permet les animations sur les propriétés définies sur les pseudo-éléments.
Selectors Level 3
La définition de '::before' dans cette spécification.
Recommendation Introduit la syntaxe à double deux-points.
CSS Level 2 (Revision 1)
La définition de '::before' dans cette spécification.
Recommendation Définition initiale, utilisant la syntaxe à simple deux-points.

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:before support (Oui) 1.0 (1.7 ou moins) [1] 8.0 4 4.0
::before support (Oui) 1.5 (1.8) [1] 9.0 7 4.0
Support des animations et transitions 26 4.0 (2.0) Pas de support Pas de support Pas de support
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de :before (Oui) (Oui) ? ? ?
Support de ::before (Oui) (Oui) 7.1 ? 5.1
Support des animations et transitions 26 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. Les propriétés non-éligibles étaient position, float, list-style-* et certaines propriétés d'affichage. Firefox 3.5 enlève ces restrictions.

Voir également

:after, content

Étiquettes et contributeurs liés au document

Dernière mise à jour par : lespacedunmatin,