Ce qu'il faut savoir de la propriété "content" en CSS

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.