Pseudo elementi

Hai certamente notato, nella parte inerente ai link, l’esistenza di alcune pseudo classi che ti permettono di agire anche sugli stati di un elemento. In modo analogo, esistono anche degli pseudo elementi. Essi non sono elementi veri e proprio (non sono di certo tag HTML), ma delle estensioni ad HTML che puoi utilizzare con i CSS.
Anzitutto, gli pseudo elementi funzionano come le pseudo classi: iniziano con i due punti.

:before e :after rappresentano, rispettivamente, la parte precedente e successiva di un elemento: prendi ad esempio un <div> e immagina che prima del suo contenuto ci sia una sorta di piccolo spazio, in cui puoi agire e applicare uno stile. In modo analogo succede anche con :after, solo che qui lo spazio è successivo al contenuto. Per poter utilizzare in modo corretto questi due pseudo elementi, tuttavia, devi utilizzare una proprietà particolare dei CSS: content.

content è una proprietà che ti permette di inserire del contenuto testuale da CSS, invece che da HTML. Mi raccomando: il contenuto da CSS non è indicizzabile e, in alcuni casi, nemmeno accessibile, per cui utilizzalo esclusivamente per contenuto di non primaria importanza. content può contenere qualsiasi carattere racchiuso tra singoli o doppi apici e può essere anche vuoto… Comunque sia, deve esserci, altrimenti non vedrai la magia di :before e :after!

div{}

div:before{
   cotent: "";
}

div:after{
   cotent: ">";
}

A che cosa ti può servire tutto questo? Ti faccio un esempio: poniamo il caso tu stia facendo una Web App¹. Con molta probabilità vorrai inserire delle icone a corredo dei testi, in modo da far capire meglio il funzionamento dei tuoi bottoni². Non vorrai mica creare dei .gif o .png per ogni icona, vero? E se un domani tu volessi modificarne la dimensione, rifarai tutte le immagini? Non scherziamo!

Come abbiamo visto nel capitolo precedente, grazie al supporto di .svg e di Icon Web Fonts, è possibile ridurre notevolmente questo carico di lavoro, riuscendo a realizzare qualcosa di veramente impeccabile.
In questo modo, avendo un Icon Web Font puoi controllare le tue icone grazie a content e agli pseudo elementi :after e :before.

Riprendendo l’esempio della Web App, quindi:

a.new-document:before{
   cotent: "a";
   font-family: 'myIconFont';
}

In questo modo, a fianco del tuo link con classe .new-document apparirà la lettera “a”, che si tradurrà nell’icona che hai scelto per il tuo Icon Web Font, ad esempio, una matita.

Grazie a questa piccola tecnica, ti risolvi un paio di problemi. Anzitutto, essendo dei font, le tue icone potranno essere scalate e ridimensionate a piacere, senza perdere alcun dettaglio. Inoltre, visto che tutte le icone saranno contenute all’interno di un unico file, il browser farà una sola richiesta per tutte le icone³. Come ultima cosa, grazie a :before e :after, le tue icone non verranno indicizzate dai motori di ricerca e non andrai quindi a “sporcare” l’HTML con immagini o altri codici strani.

A fronte di questi pro, ovviamente, ci sono anche dei contro. Essendo tutte le icone trattate come testo, potrebbe essere parecchio impegnativo (e frustante) utilizzarle in alcuni contesti. Devi tenere conto che, anche se non sono lettere, esse sottostanno alle regole di trattamento dei font: grandezza e interlinea in primis. Armati di pazienza perché il tutto non è così immediato. Inoltre, se le tue icone devono avere più colori (per una singola icona), non puoi assolutamente utilizzare questo metodo: essendo dei caratteri puoi applicare solo un colore per volta.

:after, infine, ti potrebbe essere utile per risolvere il problema di float. Se, infatti, nel contenitore degli elementi con float imposti lo pseudo elemento, dovresti riuscire a ristabilire la sua altezza:

#content:after{
   display: block;
   height: 0;
   content: "";
   clear: both;
}