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é.
(publicité)
À 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 :
- MDN : content
- CSS Reference Codrops (en anglais)
- Spécification W3C (en anglais)
- Autres entrées du Dico CSS :
::after et ::before
Cet article est pour l'essentiel tiré de l'almanach de CSS-Tricks de Chris Coyier, avec son aimable autorisation.
Sur l'auteur : Chris Coyier 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.