Comment bien utiliser :before et :after en CSS ?

de , le , 1 5 5 4656 vues
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 !

Tutoriels conseillés

outils professeur date intitulé
CSS Utiliser une font iconographique avec @font-face