Pseudo-classes 'before' et 'after'

Après m'être cassé les dents, en essayant de mettre une puce devant un titre en 'h2', je commence à comprendre.

A la base la pseudo-classe 'before', respectivement 'after', permet d'ajouter du contenu avant, resp. après, un élément HTML.

 

Un exemple:

toto:before { content: url(puce.png) }

<h2 class="toto">Un titre</h2>

 

Ce code est sensé afficher l'image 'puce.png' avant le texte contenu dans l'élément h2 de la classe 'toto'.

 

Alors voilà, c'est là que ça se complique. Ce code testé avec Firefox fonctionne correctement. Par contre, il ne fonctionne pas avec IE7.

Après avoir fait un peu de recherche sur le net, il semble que ma constatation soit confirmée, et c'est bien dommage...

Auteur: Euan MATEO