Da sempre: un sito web si crea con elementi HTML applicando a essi degli stili CSS. E se ti dicessi che in questo articolo andremo a scoprire che, in fin dei conti, tutto questo non è del tutto corretto?
Che cosa mi dici? Ti ho incuriosito?
Scopri gli pseudo-elementi e come ti aiuteranno a dare vita alle tue pagine!
Penso proprio di sì perché se stai continuando a leggere queste parole è perchè desideri migliorare le tue conoscenze e padroneggiare la tecnica che discuteremo in questo articolo ti fornirà un vantaggio rispetto alla concorrenza.

Se hai seguito il nostro corso Scopri i fondamenti del Web Design sarai sicuramente arrivato alla conclusione che una pagina web non è altro che un insieme di elementi HTML. Certo, per rendere le pagine web più belle abbiamo bisogno di applicare degli stili CSS o degli effetti in JavaScript, ma sempre di elementi HTML stiamo parlando…
Questa è sicuramente una certezza, in fin dei conti tutto il web si basa su questo linguaggio di marcatura dato che non esiste sito web che non è strutturato con i suoi elementi.
Allora di che cosa parliamo in questo articolo?
Mi fa piacere che tu ti sia posto questa stessa domanda e sono ancora più contento di risponderti: oggi parliamo di elementi speciali (pseudo-elementi) che vivono all’interno di qualsiasi pagina web e che ci permettono di creare interessanti soluzioni per migliorare lo stile delle nostre pagine.
Se andiamo a controllare il termine del prefissoide pseudo all’interno del vocabolario Treccani troviamo definizioni come:
- indica che la qualità espressa dal termine a cui è preposto è soltanto fittizia, pseudofilosofo e pseudogiornalista ne sono un esempio;
- indica falsa apparenza, oppure significa che l’oggetto ha soltanto somiglianza con ciò che è designato dal secondo elemento, qua abbiamo lavoro pseudoscientifico e pseudocasa;
- indica l’apparente presenza di una proprietà, come in pseudosfaldatura e pseudorombico;
- designa autori di opere tramandate sotto falso nome, pseudo-Aristotele è un esempio di questo significato;
- (in chimica) indica una somiglianza apparente, come per dire pseudosale o pseudosoluzione;
- (in medicina) indica malattie anatomiche che hanno affinità solo esteriori con quanto è indicato dal secondo termine, ovvero pseudobulbare o pseudocisti.
Insomma proprio come deve fare un vocabolario, nel Traccani troviamo le diverse definizioni di tutti gli usi che vengono fatti di pseudo. Ma quando si parla di sviluppo web, qual è il significato di pseudo-elemento?
Controllando le definizioni precedenti devo ammettere che la definizione che ritengo più appropriata sia la seconda: significa che l’oggetto ha soltanto somiglianza con ciò che è designato dal secondo elemento. Quindi nello sviluppo web uno pseudo-elemento è un elemento a tutti gli effetti che però mantiene le stesse proprietà dell’elemento al quale appartiene, almeno fintanto che queste non vengono modificate con i CSS.
Sto facendo un po’ di confusione? Ti ho già perso? Facciamo un passo indietro.
Perché è importante conoscere gli pseudo-elementi?
Essere uno sviluppatore web è una carriera all’interno della quale si incontrano principi di diverse professioni. Bisogna essere in grado di comprendere l’uso di un linguaggio di programmazione, avere basi di design e di user experience e la conoscenza del funzionamento delle reti informatiche non è affatto un male 😉
Insomma capisco che a primo sguardo possono sembrare un sacco di cose, ma ti assicuro che ne vale proprio la pena perché quando si riesce a realizzare un determinato stile o effetto ci si sente in grado di fare proprio tutto! E ovviamente questa sensazione si protrae per tutto il tempo che impieghiamo nella realizzazione di un sito web, soprattutto se sappiamo quello che stiamo facendo.
Tranquillo, non sto divulgando. Sto semplicemente introducendo il motivo per il quale oggi ti sto parlando degli pseudo-elementi, perché alcuni degli effetti più interessanti non si potrebbero realizzare senza di questi. Facciamo subito un esempio veloce e scopriremo successivamente come migliorarlo proprio grazie agli pseudo-elementi.
Un effetto molto interessante che è anche difficile da realizzare con un CMS è proprio quello che applicavano centinaia di anni fa i monaci amanuensi quando si trovavano ad applicare le miniature ai testi che avevano copiato.
Non sai di cosa sto parlando?
Nessun problema, sono sicuro che con il seguente esempio ti aiuto a rinfrescare la memoria.
Ebbene, spero che con l’uso dell’esempio precedente adesso sia più chiaro a che cosa mi riferisco. Ovviamente non è bello quanto quello realizzato dai monaci, ma possiamo sempre cercare di migliorare la situazione con i CSS a disposizione. La cosa che vorrei mettere in luce è che in questo esempio c’è qualcosa di sbagliato!
Secondo te nell’esempio precedente non c’è niente di sbagliato? Hai provato a controllare il codice HTML presente al suo interno?
<p> <span class="miniatura">A</span>desso che lo vedi qua scritto sono sicuro che ti ricordi anche tu che cosa significhi il termine miniatura. </p>
Il riferimento che ho fatto precedentemente ai CMS è dovuto al fatto che molto spesso creare una struttura HTML del genere in questi sistemi 0non è una compito semplice.
Personalmente conosco WordPress e so che con questa piattaforma è relativamente facile entrare nell’editor Testo e aggiungere l’elemento span
senza troppi problemi, anche se immagino un procedimento simile per gli altri CMS non ti saprei dire con assoluta certezza come poter raggiungere lo stesso risultato.
Quello che mi interessa evidenziare è che poche persone sarebbero in grado di ottenere lo stesso risultato se gli chiediamo di aggiungere del codice HTML al proprio testo.
Però l’errore al quale facevo riferimento prima è dovuto al fatto che in questo blocco di codice utilizziamo un elemento HTML nel modo sbagliato.
Lo <span>
è un contenitore generico per gli elementi in linea presenti all’interno dell’HTML, ma in questo caso lo stiamo utilizzando esclusivamente per modificare lo stile applicato alla prima lettera della frase. Questo non è il corretto utilizzo di questo elemento, anche perché siamo in grado di raggiungere un risultato più elegante grazie agli pseudo-elementi.

Come infatti ti dicevo precedentemente, possiamo avere a disposizione degli pseudo-elementi che non esistono veramente nel DOM della nostra pagina ma che grazie ai CSS possiamo personalizzare e sfruttare per creare incredibili effetti. Iniziamo quindi con il presentare il primo degli pseudo-elementi che voglio analizzare in questa guida.
Ti voglio dare un consiglio prima di proseguire, mettiti comodo perché sono parecchi 😉
Personalizziamo la prima lettera di un elemento
Dall’esempio che ti ho mostrato precedentemente è scaturita una dolorosa realtà: utilizzare nel modo sbagliato gli elementi HTML può compromettere la qualità del nostro codice e anche la capacità che hanno i motori di ricerca nel comprendere i nostri testi.
Questo è dovuto al fatto che noi per primi stiamo sbagliando. Come?
Beh per prima cosa stiamo utilizzando un linguaggio di marcatura per definire un gancio all’interno del nostro codice e oltre a questo non offriamo al motore di ricerca alcun elemento che abbia un qualche significato semantico. Il gancio che abbiamo creato confonde soltanto il motore di ricerca e in fin dei conti lo utilizziamo soltanto per andare ad applicare uno stile… Questo non è assolutamente in linea con le specifiche del W3C e per fortuna ci sono delle regole standard per ovviare questo problema.
Se controlli il codice HTML presente nell’esempio che ti ho appena collegato, noterai che non è più presente l’elemento <span>
al quale ci siamo precedentemente affidati per aggiungere le nostre personalizzazioni.
Ma allora com’è possibile che la prima lettera risulta sempre evidenziata?
Ebbene questa è la potenza che gli pseudo-elementi ci mettono a disposizione. Facendo riferimento alla definizione precedente, lo pseudo-elemento ::first-letter
ha la somiglianza di essere l’elemento che definisce la prima lettera presente all’interno di una stringa, in questo caso quella contenuta all’interno dell’elemento paragrafo.

Adesso che sai che con ::first-letter
è possibile identificare la prima lettera presente all’interno dell’elemento utilizzato come selettore nella nostra regola CSS, non resta altro che vedere quali regole sono state applicate.
p::first-letter{ font-size: 250%; float: left; margin-right: 5px; }
Come puoi vedere, una volta identificato lo pseudo-elemento come selettore delle nostre regole, puoi applicare qualsiasi proprietà CSS che desideri e trattarlo come un elemento vero e proprio. L’unica differenza è che tutte le proprietà che specifichi verranno applicate allo pseudo-elemento selezionato.
Nota Bene: tutti gli pseudo-elementi richiedono la presenza di un :: prima della loro dichiarazione. Anche se in alcuni casi certi browser consentono di utilizzare soltanto una volta i doppi punti, fissa bene in mente che questo comportamento è sbagliato e che se vuoi sviluppare secondo gli standard si precede sempre il nome dello pseudo-elemento ripetendo per due volte i doppi punti.
Come personalizzare tutta la prima riga di un testo
Nell’esempio precedente ti ho mostrato come sia semplice personalizzare la prima lettera di un testo, ma se volessimo mettere in evidenza tutta la prima riga? Magari proprio come specificato nel seguente esempio?
Come puoi vedere, soltanto la prima riga è quella che viene messa in evidenza e la cosa più bella è che questa si adatta alla larghezza del proprio contenitore, cosa impossibile se utilizziamo dei tag HTML come successo nel primo esempio che ti ho condiviso.
Sfruttando questo pseudo-elemento hai la possibilità di mettere in evidenza soltanto la prima linea del tuo testo creando un effetto di sicuro interesse ma che al tempo stesso non andrà a compromettere la struttura del tuo sito ottimizzando le indicizzazioni fatte dai motori di ricerca.
Tutto questo è reso possibile da questo semplice blocco di codice:
p::first-line{ font-size: 250%; }
Io ho semplicemente incrementato la grandezza del carattere, ma come successo anche per l’esempio precedente, tu puoi veramente sbizzarrirti come meglio credi! Potrai cambiare il carattere, il suo peso, lo stile e anche aggiungere altri interessanti effetti grazie a ulteriori pseudo-elementi che incontreremo in questo articolo!
Non ti preoccupare, non hai letto male. Nei CSS è possibile concatenare più pseudo-elementi uno di fianco all’altro per ottenere degli effetti veramente incredibili! Però adesso forse è un po’ presto per poterne parlare, continuiamo a conoscere i prossimi pseudo-elementi.
Aiutiamo il visitatore a evidenziare il testo
Eccoci di fronte a un altro interessante pseudo-elemento che ti aiuterà a uniformare lo stile del tuo sito web personalizzando i colori che vengono mostrati quando il visitatore seleziona una porzione di testo.
Sono sicuro che è capitato anche a te di fare una cosa del genere, in fin dei conti si trovano moltissime informazioni online e quando stiamo facendo una ricerca per un articolo o semplicemente per un argomento che vogliamo conoscere meglio, fare il classico copia/incolla è una prassi molto comune e alla quale siamo abituati.
Ebbene oggi grazie ai CSS possiamo offrire ai nostri utenti un’esperienza più personalizzata, ecco un esempio dal vivo:
Come puoi vedere, l’esempio non sembra molto diverso da quelli precedenti, anzi a dirla tutta sembra proprio lo stesso blocco di codice, però se provi a evidenziare il testo contenuto al suo interno sono sicuro che noterai una piccola sorpresa…

Se stai consultando questo articolo con un browser basato sul motore HTML WebKit (Chrome e Safari giusto per citarne un paio) avrai notato che il colore di sfondo dell’area selezionata diventa rosso mentre il colore del testo è bianco. Cosa leggermente diversa succede nei browser che utilizzano Gecko (Firefox per esempio) dove invece il colore di sfondo del testo è blue.
Perché succede questo?
Ebbene durante gli anni questo pseudo-elemento è stato tolto e reintegrato più volte all’interno delle specifiche del W3C, oggi siamo alla quarta versione di questo documento dove lo pseudo-elemento ::selection
è stato nuovamente integrato, ma il browser Mozilla è molto attento a supportare soltanto gli standard quindi se vuoi utilizzare questo effetto anche in questi browser al giorno d’oggi devi richiamare questo pseudo-elemento attraverso lo specifico vendor prefix.
Giusto per tagliare la testa al toro, ecco il blocco di codice che dovrai utilizzare:
p::-moz-selection{ background-color: blue; color: #fff; } p::selection{ background-color: red; color: #fff; }
Dal mio punto di vista, utilizzare i vendor prefix è un’incredibile perdita di tempo ed è per questo motivo che ho creato il corso specifico all’uso di Sass, uno dei preprocessori più famosi del web. Utilizzando un preprocessore sarai in grado di far lavorare la macchina al posto tuo e sarà lei ad aggiungere i vendor prefix in modo automatico soltanto quando necessario.
Ovviamente il colore di sfondo e quello del testo non sono le uniche proprietà che puoi modificare grazie a questo pseudo-elemento, spero che con l’esempio che ti presento qua sotto potrai scoprire tu stesso quante personalizzazioni sarai in grado di applicare al tuo testo con il minimo sforzo.
Prima e dopo un elemento, libera la tua creatività!
Ci stiamo avvicinando alla fine dell’articolo e non potevo fare a meno di conservare gli pseudo-elementi più importanti per la sua conclusione. Ebbene, per quanto mi riguarda quelli che ti sto per presentare sono tra le strutture CSS più importanti che potrai conoscere anche perché ti permetteranno di creare degli effetti spettacolari utilizzando soltanto i fogli di stile!
Però, al posto di mostrarti tutti i possibili effetti che possiamo creare con gli pseudo-elementi, credo che sia meglio farti comprendere per bene che cosa questi siano.
Non ti arrabbiare perché dopo tutto questo testo ti dico che in questo articolo non andremo a vedere tutti gli effetti, in fin dei conti in questo il mio intento è introdurti al nuovo concetto degli pseudo-elementi. Se poi consideri che ci sono circa 20 effetti che possiamo realizzare con questi – molti dei quali contengono decine di varianti – sono sicuro che sarai più che contento di sapere che preparerò un articolo separato dove potremo andare nel dettaglio alla loro scoperta.
Ho intitolato questa sezione Prima e dopo un elemento perché come ti dico fin dall’inizio dell’articolo non sempre quello che vediamo nel nostro codice HTML è quello che possiamo personalizzare attraverso i CSS. Lo abbiamo scoperto personalizzando la prima lettera o la prima linea di un testo e anche quando, poco fa, abbiamo personalizzato la selezione del testo stesso.
Fino a ora sembra che gli pseudo-elementi siano relativi soltanto al testo, ma non è affatto così!
I due pseudo elementi che stiamo per conoscere sono di grande interesse perché permettono di inserire le nostre personalizzazioni prima o dopo il contenuto del nostro elemento e proprio da questo concetto arrivano i nomi che prendono: ::before
e ::after
.
Ma alla fine cosa fanno ::before e ::after?
Ecco subito un esempio dove grazie al blocco di codice qua sotto sarai in grado di aggiungere il testo Nota bene prima del contenuto dell’elemento mentre inseriremo un divertente @Andrea alla fine del contenuto per definire l’autore.
p.text::before{ content: "Nota bene"; } p.text::after{ content: "@"; }
Come detto prima, grazie a questa porzione di codice sarai in grado di aggiungere del contenuto all’interno del paragrafo con classe text senza la necessità di inserire direttamente questi caratteri nel codice HTML che compone la pagina. Praticamente abbiamo la possibilità di inserire del contenuto direttamente dai nostri CSS!
Forse ti starai chiedendo perché prima ho parlato di effetti mentre adesso aggiungo del semplice contenuto…
Beh semplicemente perché per fare in modo che gli pseudo-elementi funzionino correttamente dobbiamo aggiungere la proprietà content
, anche se questa dovesse essere vuota!
Possibilità di personalizzazione di ::before
e ::after
Grazie a questa caratteristica, gli pseudo-elementi possono aiutarci moltissimo nella creazione di layout ed effetti che fino a poco tempo fa avrebbero richiesto l’utilizzo di immagini o codice JavaScript e come dicevo prima, il tutto può essere realizzato senza sporcare le nostre pagine con del codice che ne disturberebbe la lettura, sia da parte dei motori di ricerca che da parte di utenti che navigano con gli screen reader.
In poche parole grazie a questi due pseudo-elementi abbiamo a disposizione due elementi (virtuali) per ogni elemento presente nelle nostre pagine HTML.

C’è da dire che nelle sue impostazioni iniziali questi elementi vengono letti dal browser come elementi in linea, o come la terminologia HTML vuole sono appartenenti alla categoria della sintassi text-level, ma credo che tu sappia molto bene che per modificare questa caratteristica dovrai cambiare il valore della proprietà display
impostandola a block
. In questo modo avrai ottenuto un elemento blocco pronto con il quale giocare!
Eccone un esempio:
p.text::before{ content: ""; display: block; height: 100px; width: 100px; background-color: red; }
Con questo blocco di codice hai appena creato un quadrato dalla larghezza di 100px e con un colore di sfondo rosso che, se non modificato diversamente, andrà a posizionarsi all’inizio del nostro paragrafo.
Beh al momento può sembrare abbastanza inutile creare un quadrato rosso che galleggia per la pagina, ma forse perché non ti ho ancora detto che questi pseudo-elementi accettano tutte le proprietà applicabili ai classici elementi del nostro HTML!
Proprietà come transition, transform, animazioni ma anche le semplici ombre sono tutte applicabili a questi elementi! Vediamo un veloce esempio assieme.
L’esempio che ti ho mostrato qua sopra è stato realizzato grazie alle proprietà box-shadow
e rotate
che mi hanno permesso di modificare le ombre create dall’elemento stesso per creare l’illusione che quest’ultimo fosse stato colpito da due fonti di luce differenti e grazie ai posizionamenti assoluti sono stato in grado di posizionare le ombre come desideravo per incrementare questo effetto.
Anche se nel web di oggi le ombre non sono più utilizzate come prima, c’è da dire che possono sempre tornare utili quando dobbiamo dare l’impressione che qualche elemento si trovi a un livello diverso rispetto agli altri, in fin dei conti è lo stesso principio sul quale si basa il Material Design.
Analizziamo però il codice utilizzato nell’esempio. Se utilizzi CodePen, cosa che ti ho già suggerito in questo articolo, potrai forkare tranquillamente il mio esempio e fare tutti gli esperimenti che ti vengono in mente, ma per completezza ritengo che commentare leggermente il codice CSS in questo esempio sia comunque utile.
.btn{ position: relative; } .btn::before, .btn::after{ position:absolute; content:""; bottom:20px; left:10px; top:80%; width:45%; z-index:-1; box-shadow: 0 20px 15px #333; transform: rotate(-6deg); } .btn::after{ transform: rotate(6deg); right: 10px; left: auto; }
Per prima cosa iniziamo con l’elemento principale senza il quale non sarebbe possibile utilizzare i suoi pseudo-elementi, il contenitore del bottone con classe .btn
.
L’ho posizionato relativamente perché ho bisogno di offrire un punto di appoggio agli pseudo-elementi che gli appartengono, infatti se controlli le regole successive la prima cosa che faccio per entrambi gli elementi è posizionarli in modo assoluto.
Fatto questo non mi devo dimenticare di impostare il content
anche se vuoto perché altrimenti i miei pseudo-elementi non saranno in grado di avere una dimensione. Successivamente posiziono i miei pseudo-elementi grazie alle proprietà dedicate al posizionamento assoluto (left, right, top e bottom), grazie alle quali definisco anche la loro altezza.
Successivamente non devo far altro che definire la larghezza degli pseudo-elementi alla metà della larghezza dell’elemento principale, quello con classe .btn
per rinfrescarci la memoria. Faccio questo perché altrimenti rischio di rovinare l’effetto ombra. Parlando di ombre utilizzo la proprietà standard box-shadow
e successivamente la ruoto con transform
.
Ecco fatto! Tutto quello che resta da fare è ruotare nel senso inverso lo pseudo elemento ::after
e posizionarlo sulla destra. Adesso abbiamo due ombre distinte senza la necessità di dover creare elementi aggiuntivi.
Conclusioni
Ebbene siamo giunti al termine di questo articolo nel quale ti ho presentato tutti gli pseudo-elementi che puoi utilizzare già oggi nel tuo sviluppo, che ne pensi?
Personalmente non vedo l’ora di portare avanti la creazione di esempi che riguardano lo sviluppo di effetti con ::before
e ::after
, si possono fare veramente un sacco di cose senza neanche appesantire il nostro codice HTML!
Sono curioso di sapere da te quale sia stato lo pseudo-elemento più utile e che inizierai a utilizzare nel tuo lavoro. Per non farti tornare in alto alla ricerca dello pseudo-elemento preferito ti riassumo in questa lista quali sono quelli che abbiamo scoperto in questo articolo:
::first-letter
– permette di selezionare la prima lettera di un testo;::first-line
– permette di selezionare la prima riga di un blocco di testo indipendentemente dalla dimensione della finestra;::selection
– con questo puoi personalizzare il colore, lo sfondo e l’ombra di un testo che viene evidenziato dal visitatore;::before
e::after
– questi sono sicuramente gli pseudo-elementi più versatili grazie ai quali possiamo creare diversi effetti.
Ebbene, dopo esserti rinfrescato la memoria e aver ripassato la lista degli pseudo-elementi ti va di farmi sapere qual è il tuo preferito e come pensi di utilizzarlo nel tuo lavoro? Hai già qualche cliente in mente ai quali proporre queste nuove possibilità?
Non restare lì impalato, usa la sezione dei commenti qua sotto e fammi sapere che cosa ne pensi, le tue opinioni sono veramente molto importanti per noi e se ti è nato qualche dubbio non esitare a esporlo saremo felici di risponderti!
Salve ragazzi, come si fa a trasformare uno pseudoelemento in un elemento vero, se si può?
Mi spiego: io ho aggiunto un counter css alle righe di una tabella come pseudoelemento :before e via css gli ho dato un display:block, una larghezza ed una altezza.
Adesso si pone il problema di manipolare questo pseudoelemento via jQuery per animarlo con .slide al fine di mostrare o nascondere i ; come faccio a selezionarlo se nel DOM non esiste?
Ho provato a wrappare il selettore completo di pseudoelemento in un ma non funziona.
Ho provato anche a prependere alle un e a replicarvi dentro il contenuto dello pseudoelemento ma non funziona perché viene creato il div nuovo come primo elemento dentro al ma non funziona la selezione dello pseudoelemento per leggerne il contenuto sia col metodo .html che .text
Che fare?
Ciao Fabio,
purtroppo non è possibile fare una cosa del genere perché come hai capito anche tu stesso dato che lo pseudo-elemento non esiste all’interno del DOM non è possibile selezionarlo da qualsiasi libreria JavaScript.
Ci sono diversi workaround che le persone hanno messo in atto e dopo una ricerca online ritengo che questa sia la risposta più completa che al momento sia presente sul web.
http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/21709814#21709814
Spero che questa risorsa ti sia utile e che tu abbia già risolto il tuo problema nel mentre 😉
Andrea
Ciao Andrea! Volevo farti una domanda riguardo i vendor prefix. Attualmente per sviluppare uso Atom e mi servo del plug-in di Autoprefixer. La domanda era la seguente: Sia questo plug-in che sass, ad esempio, svolgono la stessa funzione per quanto riguarda i Vendor prefix? Grazie mille! 🙂
Ciao Emiliano,
purtroppo da solo Sass non è in grado di aggiungere i vendor prefix alle tue regole CSS. Onestamente prima io utilizzavo Compass per questo compito ma sembra che ultimamente il suo sviluppo sia discontinuo e non conoscendo il funzionamento dell’estensione Atom che stai utilizzando mi sento di darti due consigli diversi:
Spero di essere stato chiaro ma se così non fosse per qualsiasi cosa non esitare a rispondermi nuovamente.
A presto,
Andrea
Ciao Andrea! Grazie per la chiarificazione. Probabilmente la scelta migliore sarebbe l’ultima anche se (e probabilmente perché sono un po’ agli inizi ancora) ammetto di non aver ben capito che ruolo(i) svolgono gli strumenti da te citati. Ne approfitto della tua bontà (e conoscenza 😉 ) per chiederti gentilmente se hai del materiale inerente a questi strumenti in modo da capire bene i suoi utilizzi e, perché no, come dicevi tu, integrarli nel mio arsenale. Li sento spesso nominare e so che sono strumenti che vengono usati oggi da chi lavora, per cui sarebbe comunque stato un passo da fare. Ti ringrazio nuovamente e ti auguro una buona giornata! 🙂
A presto!