Comment bien utiliser :before et :after en CSS ?
de Renaud Anney, le , 1 5 3 6659 vuesLes 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.
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 :