HTML CSS – Utilizzare al meglio :before e :after

Scritto da fedeweb il 13 maggio 2013 con 2 Commenti | Pubblicato in 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

Template con navigazione orizzontale animata, realizzato in HTML, CSS e jQuery

437 download

711 download

About fedeweb

Federico Pian è un web designer freelance e insegnante , che ama condividere le proprie conoscenze e rendere tutti partecipi della sua passione. Guarda il suo portfolio e cosa sa fare nei tutorial. Scopri più informazioni su di lui nella pagina mi presento.

2 Commenti

  1. 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

  2. e-cigarette battery HTML CSS – Utilizzare al meglio :before e :after | Fedeweb

Trackbacks & Pingbacks

  1. Generatore di Sprite CSS – Zero Sprites | Fedeweb

Lascia un commento