::after & ::before


::after est un pseudo-élément permettant d'insérer du contenu (content) dans une page à partir de CSS (sans qu'il soit besoin de l'inclure dans votre HTML). Le résultat final n'est pas intégré au DOM, mais il est affiché sur la page comme si c'était le cas. Ce serait un peu comme si on avait :

//CSS
div::after {
  content: "hi";
}

//HTML
<div>
  <!-- votre contenu à l'intérieur de la div -->
  hi
</div>

::before fonctionne exactement de la même manière, mais en insérant le contenu avant tout autre contenu dans le HTML.

La valeur de content peut être :

  • Une chaîne de caractères : content: "des caractères"; - les caractères spéciaux doivent être encodés spécialement comme entités unicodes. Voir la page glyphes.
  • Une image : content: url(/chemin/vers/image.jpg); - l'image est insérée à ses dimensions exactes et ne peut pas être redimensionnée. Dans la mesure où des choses comme les dégradés sont en fait des images, un pseudo élément peut être un dégradé.
  • Rien : content: ""; - utile pour les clearfix et pour insérer des images en background.
  • Un compteur : content: counter(li); - très utile pour donner du style à vos listes, jusqu'à l'arrivée de :marker.

Attention : vous ne pouvez pas insérer de HTML (en tout cas il ne sera pas rendu comme tel).

Faut-il utiliser : ou :: ?

La syntaxe à deux fois deux-points a été introduite par la dernière spécification, pour faire une distinction entre pseudo-classes (une fois deux-points) et pseudo-éléments (deux fois deux points). Il y a en effet une différence entre pseudo-éléments et pseudo-classes. Une pseudo-classe cible un élément qui existe réellement, alors qu'un pseudo-élément cible un élement "virtuel" qui peut changer selon le HTML réel.

Tous les navigateurs qui supportent la syntaxe :: supportent également la syntaxe :. Cependant, IE8 n'est compatible qu'avec cette dernière. Jusqu'à nouvel ordre, il est donc recommandé d'utiliser :.


À lire également dans La Cascade :

Les pseudo-éléments :before & :after, par Louis Lazaris
Combinateurs et pseudo-classes, par Steven Bradley

Exemples d’utilisation dans La Cascade :

Des colonnes de même hauteur, par Kezz Bracey
Un surlignage simple en CSS, par Chris Coyier
Animer des pseudo-éléments, par Donovan Hutchinson
Créer des sphères en CSS, par Donovan Hutchinson
Portal CSS, par Donovan Hutchinson

Autres ressources à consulter sur ce sujet :

Autres articles intéressants :

articles en français :

:before et :after, des pseudo-éléments qui ont du style, chez Jérémie

articles en anglais :

A whole bunch of amazing stuff pseudo-elements can do, par Chris Coyier
Intro to pseudo-elements, vidéo par Chris Coyier
A Single Div, des exemples d'illustrations réalisées à partir d'une simple div et de CSS utilisant :before et :after, très impressionnant !


Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.

Sur l'auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.