VIII. Pseudo-éléments CSS :before ; :after▲
Fonctionne avec :
- FireFox
- NS 6/7
- Mozilla 1.x
- Opéra 6/7
- Safari
Attributs utilisés :
- content
Petite astuce css amusante et pratique, mais attention qui ne fonctionne pas encore avec IE6 ! 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.
VIII-A. 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 :
<p style="color:red; font-weight:bold">
<img src="images/lightmov.gif" style="width:20px;height:27px" alt="" /> Astuce !
</p>
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 :
.astuce
{
color:red;
font-weight:bold;
background-color:transparent;
}
.astuce:before {content:url(images/lightmov.gif)}
.astuce:after {content:" ! "}Puis dans la page html :
<p class="astuce"> Astuce</p>
É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 ;-).