Economise les boites pour Noël !

Utiliser :before et :after

Le principe c’est de simplifier le html mais complexifier le css 😉

Au lieu d’écrire :


<p><span class="icon"></span>Je mets des icones supers devant et derrière mon texte<span class="icon icon2"></span></p>

J’écris seulement :


<p class="icon">Je mets des icones supers devant et derrière mon texte</p>

Et j’écris le css de cette manière :


p.icon:before {
   content:"";
   position: absolute;
   width: 10px;
   height: 10px;
   background: url(monimage.png) no-repeat left center //etc...
}
p.icon:after {
   content:"";
   position: absolute;
   width: 10px;
   height: 10px;
   background: url(monimage.png) no-repeat right center //etc...
}
p.icon {padding: 0 20px;}

Voilà, à toi de tester !