Si vous utilisez les pseudo-éléments ::before et ::after en CSS, alors vous avez déjà utilisé la propriété content, sans quoi votre élément ne s'afficherait pas, mais savez-vous ce qu'il est possible de faire avec ?

Tout d'abord, le rôle de la propriété "content" est d'insérer du contenu généré par par le CSS dans votre élément HTML.

Ou plutôt dans votre pseudo-élément, car l'utilisation de cette propriété se limite à ::before et ::after d'après la spécification actuelle.

Vous savez donc sûrement que l'on peut simplement insérer un contenu vide avec content: "", du texte avec content: "hello world" ou des caractères spéciaux, des icônes (avec une police adaptée), etc...

Mais saviez-vous que vous pouvez aussi :

Insérer la valeur d'un attribut

/* <span class="example" data="6">notifications</span> */

span.example::before {
  content: attr(data);
}

Les pseudo-éléments sont souvent utilisés à des fins d'illustration, mais dès qu'une information dynamique doit être injectée, le réflexe est souvent de créer un élément HTML spécifique pour l'afficher.

Hors ici, il est possible d'injecter la donnée dans un attribut de votre élément, et d'aller le chercher avec la valeur attr() de la propriété content !

Insérer une image

div.example::before {
  content: url(...);
}

Comme pour la valeur précédente, il n'est pas obligatoire d'utiliser un élément supplémentaire pour afficher une image, il est possible de le faire avec content.

Néanmoins vous ne devez utiliser cette méthode que pour les images d'illustration, étant donné qu'il est impossible d'ajouter de texte alternatif pour l'accessibilité.

Insérer un compteur

p.list-item {
  counter-increment: p_counter;
}
p.list-item::before {
  content: counter(p_counter);
}

Grâce à un système de variable que vous venez incrémenter lorsque l'élément sélectionné est inséré dans la page, vous pouvez afficher la valeur du compteur directement dans un pseudo-élément.

Insérer des apostrophes

p.example::before {
  content: open-quote;
}

p.example::after {
  content: close-quote;
}

Ici pas de surprise, vous pouvez ajouter automatiquement des apostrophes au début et à la fin de certains de vos paragraphes très facilement.

Il existe d'autres valeurs pour la propriété content, mais je vous laisse les découvrir directement dans la documentation W3School.

J'espère que cet article vous aura plu, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo par Jackie Zhao sur Unsplash