Content


La propriété content (contenu) de CSS est utilisée avec les les pseudo-éléments :before et :after. Elle sert, comme son nom l'indique, à insérer du contenu, et elle est obligatoire dans les pseudo-éléments. Vous ne pouvez pas supprimer la propriété content, le pseudo-élément ne fonctionnerait pas. A minima, la propriété content doit contenir une chaîne de caractères vide ("").

La propriété content peut avoir quatre types de valeurs :

Chaîne de caractères

//CSS
.name:before {
  content: "Mon nom: ";
}

À la suite de quoi un élément tel que :

//HTML
<div class="name">Chris</div>

serait rendu ainsi :

Mon nom: Chris

Il pourrait aussi s'agir d'une chaîne de caractères vide, comme on le voit souvent dans les clearfix :

//CSS
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Compteur

//CSS
div:before {
  content: counter(my-counter);
}

Image

//CSS
div:before {
  content: url(image.jpg);
}

Le résultat sur la page est une image, tout comme img. On pourrait aussi avoir un dégradé. Notez cependant qu'en l'insérant ainsi vous ne pouvez pas modifier ses dimensions.

Si toutefois on voulait pouvoir redimensionner l'image, on pourrait procéder ainsi : utiliser une chaîne de caractères vide pour le contenu, puis ajouter display: block;, lui donner ensuite des dimensions et enfin utiliser background-image pour insérer l'image. De cette façon, vous pourriez redimensionner l'image grâce à background-image.

Attribut

Vous pouvez utiliser les valeurs tirées des attributs d'un élément HTML :

//HTML
<div data-visual-label="Widget Rating">60</div>

//CSS
[data-visual-label]:before {
  content: attr(data-visual-label) ": ";
}

Pour conclure :

Rappelez-vous que le contenu inséré avec les pseudo-éléments n'est pas dans le DOM, on ne peut donc pas tout faire avec. Par exemple vous ne pourrez pas attacher un événement directement (et uniquement) à un pseudo-élément. Par ailleurs, le contenu ne sera pas lu par les outils d'accessibilité.


À lire également dans La Cascade :

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

Autres ressources à consulter sur ce sujet :


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.