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.

Résultat :



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.

Résultat :




3. Ajouter des sigles avant chaque élément d’une liste

ul#ma_liste li:before {content:">>";}

Résultat :

Astuce CSS


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.

Articles qui pourraient vous plaire

Commentaires (13)

  1. @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.

  2. 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é)
     

  3. 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 😉

Répondre à kevin - Annuler la réponse

L’âme d’un artiste ? Inscris-toi sur DigitalPainting.school

Fermer