CSS Débutants

Vous êtes ici > Index | Cours | CSS débutants | :before ; :after

Pseudo-éléments CSS :before ; :after

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-éléments :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 src="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 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 :

Source css

Indiquez dans votre feuille de style externe le code suivant :

.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 ;-).

Haut de page