Fw

Wordpress Creative Developer

HTML CSS – Utilizzare al meglio :before e :after

  • Html Css
  • -

Quando scriviamo codice, dobbiamo sempre chiederci se stiamo utilizzando la soluzione migliore possibile per implementare una specifica parte di layout.

HTML CSS - Utilizzare al meglio :before e :after

Spesso nei layout capita di dover inserire delle icone prima o dopo un link o un titolo, come nel caso di questo bottone.

Esempio bottone con icona

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

CSS code – Copyright: Sakuoka

2 commenti

  1. [...] sprite CSS, insieme all’utilizzo dei selettori :before e :after, sono un’ottima tecnica per migliorare la velocità di caricamento di un [...]

  2. 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 :P

Scrivi un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *