Jeudi 28 novembre 2002 
:before ; :after
Petite astuce css amusante et pratique, mais attention qui ne fonctionne pas encore avec IE ! Il ne faut donc l'utiliser pour l'instant que pour des choses peu importantes.
Avec les pseudo classes :before et :after, on peut automatiser l'inclusion de caractères ou d'images.
Exemple :
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 scr="images/lightmov.gif" style="width:20px;height:27px" alt="" /> Astuce ! </p>
Résultat
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 le css prend 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 :
Source css
.astuce {
color:red;
font-weight:bold;
background-color:transparent;
}
.astuce:before {content:url(images/lightmov.gif)}
.astuce:after {content:" ! "}
Puis dans la page html :
Source html
<p class="astuce"> Astuce</p>
Résultat :
Astuce
Évidemment, si vous regardez ceci avec IE, vous ne voyez ni l'ampoule ni le point d'exclamation. Il vous faut au minimum Netscape 6, Opéra 6 ou Mozilla pour en profiter.
A vous de choisir : coder des lignes superflues qui encombreront la bande passante ou profiter pleinement des standards ;-).
Oui Biz, je suis pour la css-mania ;-p
