Vous êtes ici > CSS Débutant | Tutoriels CSS | Générer du contenu à l'aide de pseudo-éléments

Petite astuce CSS amusante et pratique mais qu'il ne faut en aucun cas utiliser pour diffuser des informations importantes car elle comporte deux inconvénients :

  1. Rien de ce qui est généré de cette façon est accessible
  2. MSIE (avant la version 8) ne l'implémente pas

Mais reprenons... Avec les pseudo-éléments :before et :after, on peut automatiser l'inclusion de caractères ou d'images grâce à l'attribut content. On peut aussi faire ressortir des informations de "planquées" dans le code source.

Générer du contenu à l'aide des CSS

Fonctionne avec :

  • Firefox
  • Mozilla 1.x / SeaMonkey
  • MSIE 8
  • Opéra 6+
  • Safari

Attributs utilisés :

  • content

Générer l'affichage d'une image ou d'un caractère

Je désire, pour indiquer une astuce, qu'une petite image d'ampoule soit présente devant la mention "Astuce" pour la mettre plus en valeur.
De façon classique, ceci pourrait donner cela :

source html

<p style="color:red; font-weight:bold">
 <img src="images/lightmov.gif" style="width:20px;height:27px" alt="" /> Astuce !
</p>

Zone de test

Astuce !

Mais comme je donne beaucoup d'astuces (sic !), je trouve cette opération répétitive un peu pénible, sans compter que cela alourdit le poids de la page.
C'est là que les CSS prennent le relais.

Pour automatiser l'inclusion de l'image et, soyons fainéant jusqu'au bout, le point d'exclamation, j'inscris donc cela dans ma feuille de style :

Code CSS

.astuce {
 color:red;
 font-weight:bold;
 background-color:transparent;
 }
.astuce:before {
 content:url(images/light_bulb__exclamation.png)
 }
.astuce:after {
 content:" ! "
 }

Notez bien que les caractères à faire apparaître (ici le point d'exclamation), doivent être entre guillemets.

Code html

<p class="astuce"> Astuce</p>

Zone de test

Astuce

Évidemment, si vous regardez ceci avec une ancienne version d'IE, vous ne voyez ni l'ampoule ni le point d'exclamation. Idem si vous utilisez un lecteur d'écran. Est-ce grave Docteur ? Non : voir ou ne pas voir l'ampoule ne soustrait absolument rien à l'information. C'est juste de la déco.

Générer les informations des attributs

Exemple d'application à l'attribut hreflang

On peut aussi trouver intéressant de générer le contenu de certains attributs mentionnés dans des balises. Une pratique courante, par exemple, est d'indiquer la langue de la page vers laquelle pointe un lien et qui est indiqué par l'attribut hreflang.

Code (x)html
<a href="http://www.w3.org" hreflang="en">Site du W3C</a>

La mention "en" de l'attribut hreflang indique que la langue utilisée sur le site du W3C est l'anglais. Après (:after) le lien, l'attribut content peut permettre d'afficher cette information.

Code CSS
a[hreflang]:after {
 content: " (" attr(hreflang) ") "; 
 }
Zone de test

Site du W3C

Attention

Ne pas spécifier a[hreflang] générera les parenthèses vides derrière tous les liens, même ceux qui ne comportent pas l'attribut hreflang. Il est donc plus prudent de l'indiquer.

Exemple d'application à une feuille de style d'impression

Cette même méthode peut être utilisée dans une feuille de style d'impression pour faire imprimer l'url complète, ce qui peut être pratique pour l'utilisateur qui n'aura pas à recopier à la main les adresses des sites liés. Dans ce cas, on indiquera dans la feuille de style (appelée print.css par exemple et déclarée ainsi <link rel="stylesheet" type="text/css" media="print" href="print.css" />) :

Code CSS
a:after {
 content: " (" attr(href) ") ";
 }
Astuce

On peut cumuler les indications à afficher. Ainsi, si on veut qu'à l'impression il y ait aussi l'indication de langue comme dans le précédent exemple (entre crochets et séparées d'un tiret), on indique :

a:after {
 content: " [" attr(href) " - " attr(hreflang) "] ";
 }
Résultat attendu 

Site du W3C [ http://www.w3.org - en ]

précédent suivant

Haut

Contact : pascale at mammouthland.net

Creative Commons License

En cas de reproduction (partielle ou totale) de cet article, prière de faire un lien vers la page originale : http://css.mammouthland.net/pseudo-elements-css-after-before.php