HTML CSS – Utilizzare al meglio :before e :after
Quando scriviamo codice, dobbiamo sempre chiederci se stiamo utilizzando la soluzione migliore possibile per implementare una specifica parte di layout.
Spesso nei layout capita di dover inserire delle icone prima o dopo un link o un titolo, come nel caso di questo bottone.
Fino a qualche tempo fa il codice html lo scrivevo in questo modo, inserendo un’immagine prima del testo del link
Continua a leggere
dando poi gli opportuni stili per posizionare gli elementi.
Prova ora a pensare di avere 20 testi con icone in una pagina web. Questo comporta 20 richieste http per le varie immagini.
La soluzione migliore in questi casi è usare la tecnica dello sprite dove si va a creare un’immagine unica con tutte le icone e tramite css e la proprietà background-position andare a prendere la porzione di immagine che serve.
Poi per posizionare le immagini a sinistra o a destra del testo si utilizzano i pseudo selettori CSS :before e :after.
Il codice HTML quindi diventa:
Continua a leggere
Per mettere l’icona a sinistra della scritta dovrai usare :before:
a:before {
content: ""; /* testo che si vuole inserire prima */
display:block;
background: url(sprite.png) no-repeat left top;/*prendo porzione dello sprite in alto a sinistra */
float:left;
width:16px;
height:10px;
margin-right:5px;
line-height:10px;
}
In questo modo l’immagine viene inserita come sfondo, prima del link.
Lo stesso vale se l’icona la vuoi mettere dopo il link, utilizzando :after.
Conoscevi questi pseudo-selettori? Li utilizzi?
Foto credits
2 commenti
[...] sprite CSS, insieme all’utilizzo dei selettori :before e :after, sono un’ottima tecnica per migliorare la velocità di caricamento di un [...]
Bell ‘articolo, mi ero sempre chiesto effettivamente a cosa servissero questi pseudo selettori,io vedo che vengono usati spesso anche per animazione css3, ma devo ancora capire come utilizzarli bene