Comment bien utiliser :before et :after en CSS ?

Les pseudo-classes :before et :after vont vous permettre d'obtenir un code HTML plus propre, débarrassé de balises décoratives. Régulièrement vous devez ajouter un petit élèment décorative comme un icône devant une balise. Par exemple une loupe.
Plutôt que de rajouter une balise vide contenant cette loupe il vaut mieux utiliser :before ou :after.

:before va ajouter un élément devant la balise.
:after va ajouter un élément après la balise.

.min-icon-loupe:before{
     content : url('ico/loupe.png');
     position:relative;
     top:-2px;
}

le code html :

<span class="min-icon-loupe">Yep this wood !</span>

"loupe.png" va dont être ajouté juste avant votre span. Cela donne un résultat ressemblant à ça :
Yep this is book !