La propriété CSS content a pour but de générer un contenu. C’est-à-dire que, sur un élément précis, vous pouvez ajoutez avant ou après celui-ci du texte, une images ou des guillemets.

Pour ce faire, il faut passer par les pseudo-classes :before et :after. Vous ne les connaissez peut-être pas mais elle sont cousines des plus connues :link, :visited, :hover et :active et fonctionnent de la même façon.

Dans le code CSS, cela ressemble à cela :

[css] a:before {content:" Lien :";} /* et/ou */ a:after {content:" Lien :";}

Cette propriété accepte :

• Du texte entre guilllemets
• Des images avec le même principe que la propriété background, c’est-a-dire url(image.png).
• attr(x) : ajoute en texte la valeur de l’attribut « x » de son choix.
• open-quote : ouvre un guillemet.
• close-quote : ferme un guillemet.
• no-open-quote : n’ouvre pas de guillemet.
• no-close-quote : ne ferme pas de guillemet.
• inherit : héritage

Toutes sortes de possibilités sont imaginables, voici un petit résumé de tout ce que j’ai pu voir sur le Web. Ces exemples ne fonctionnent pas sous Internet Explorer. Essayez avec .

Attention ! Cette propriété est très utile mais ne doit pas servir à générer un contenu indispensable à la compréhension du contenu global. Partez toujours dans l’optique que la propriété content et là pour ajouter des fioritures !

Plus d’infos à ce sujet :

• Blog & Blues : :before et :after, du bon usage du contenu généré
• Nanoum.net : before et after
• Yoyodesign : Le contenu généré, le numérotage automatique et les listes
• Mammouthland : :before ; :after