Astuce CSS : La propriété « content »
La propriété CSS « content », qui n’est pas supporté par Internet Explorer (pas de surprise, en effet), permet de réaliser des mises en page particulières et offrent de nombreuses possibilités. Relativement peu utilisée, elle permet d’ajouter du contenu avant ou après un élément spécifié.
Comment ça marche ?
Fonctionnant en couple avec les pseudo-classes :before et :after, elle vous permet donc d’ajouter de nombreuses choses, et c’est bien là sa force :
- inherit : il s'agit de l'héritage
- – [URI] : un lien vers une page web
- – [string] : une chaîne de caractères : un mot, une phrase…
- normal
: aucun contenu généré- open-quote
: ouvre un guillemet (‘ » ‘ par défaut)- close-quote
: ferme un guillemet (‘ » ‘ par défaut)- no-open-quote
: n’ouvre pas un guillemet (pas dur à deviner en effet)- no-close-quote
: ne ferme pas un guillemet- attr(
[nom de l’attribut])
: la valeur d’un attribut [nom de l’attribut] de votre choix- counter(
[nom], [style])
: la valeur du compteur [nom].- counters(
[nom], [string], [style])
: la valeur de tous les compteurs [nom], séparés par [string].
Exemples
1. Noter automatiquement l’url d’un lien après celui-ci
Design Spartan est un site trop cool !
a:after {content: " (" attr(href) ")";}
Cette syntaxe particulière permet de dire que l’on veut, après la lien <a>, ajouter entre parenthèse le contenu (chaîne de caractère) de l’attribut href de ce même lien <a>. Cela peut paraître bizarre mais il s’agit de logique.
2. Réaliser un paragraphe de citation avec des guillemets originaux
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor dolore magna aliqua.
p.citation { text-indent:9px; } p.citation:before, p.citation:after {content:url("quote.png"); }
Je spécifie donc que mes paragraphes « citation » auront comme contenu additionnel avant et après eux une image.
3. Ajouter des sigles avant chaque élément d’une liste
ul#ma_liste li:before {content:">>";}
Résultat :
Plus d’exemples
Au cours de mes recherches, je suis tombé sur le très bon site Babylon Design où quelques exemples de l’utilisation possible de cette propriété sont exposés (avec entre autre la réalisation d’un bouton extensible en largeur, des listes hiérarchisées, etc…):
La prorpiété « content » sur Babylon-Design
Je rappelle enfin que malgré que l’on puisse ajouter du texte de cette manière, les informations importantes doivent être écrites en HTML et que le CSS ne sert qu’à la mise en forme.
Auteur: Gaétan Weltzer, comme toujours en fait.
Ldoppea -
Sympa comme astuce, merci !
Les images des deux exemples sont inversées par contre 😉
Equesdesign -
Je te remercie poto, je suis bien content que tu ais répondu à ma demande. ^^
Je l’utiliserai ça c’est certain 😀
Design Spartan -
@Equesdesign : Je te l’avais dit que je le ferai cet article !
@Ldoppea : Merci c’est corrigé. 🙂
crik8 -
L’astuce pour les boutons et les citations est vraiment intéressante !
Un grand merci spartan 🙂
kevin -
Un peu hors sujet mais c’est normal d’arriver sur l’image d’en tete du post quand on clique dessus sur la home? Pas top au niveau navigation.
Design Spartan -
@kevin : Non tu as raison de le signaler je ne l’avais pas vu. J’ai mis à jour le plugin Lightbox et depuis, c’est la merde un peu partout. Je vais me pencher dessus cette semaine, désolé pour ce petit problème. Merci à toi.
kevin -
No pb 😉
yama -
Ce genre d’astuces, qui demande à se passer des internautes qui utilisent IE c’est un choix qu’il faut être prêt à assumer ^^
Pour le même genre de résultat je préfère largement utiliser un peu de Jquery,
(un peu + de 90% des postes ont le JS activé)
Mademoiselle Pixelle -
Mmmh… bien pratique va falloir que je me renseigne là-dessus…
Laurent -
Intéressant mais le fait que cette propriété ne soit pas gérée par IE peut poser problème.
Dans ce cas, et comme l’a mentionné yama, il faudra appliquer un soupçon de javascript 😉