In questo tutorial parliamo dei pseudo elementi. Andremo a vedere cosa sono, come si applicano e che differenza hanno con le pseudo classi.
I pseudo-elements, come le pseudo-classes, sono un insieme di parole chiave che si aggiungono dopo i selectors. Nel tutorial dedicato alle pseudo-class abbiamo visto come possiamo modificare gli elementi quando si trovano un certo stato. I pseudo-element, invece, ci danno la possibilità di modificare parte dell’elemento o aggiungere altri elementi all’interno dell’elemento stesso.
Pseudo-Classes Vs. Pseudo-Elements
Differenze sostanziali:
- con le pseudo-class modifichiamo l’elemento per intero quando si trova in un certo stato mentre con i pseudo-element modifichiamo una specifica parte dell’elemento.
- con le psudo-classes si usano i : una sola volta, es: a:hover, con i pseudo elements si usano i : doppi, es: a::after.
NB: ad oggi (ottobre 2021) se provi ad applicare un pseudo element usando i : una sola volta ai browser non fa alcuna differenza. Questo è dovuto alla retrocompatibilità, ovvero alla compatibilità con le versioni precedenti di CSS. Con CSS1 e CSS2 non c’era distinzione fra pseudo-classes e pseudo-elements, con entrambi si usavano i : una sola volta. Con l’introduzione di CSS3 la documentazione invita a usare i : singoli per le pseudo class e i : doppi (::) per i pseudo element. In futuro questa situazione potrebbe cambiare, i browsers potrebbero accettare solo i : doppi per i pseudo elements, quindi se li inserite con i : singoli un giorno potrebbero crearvi problemi. Seguire gli standard è sempre cosa buona.
I psuedo-elements non sono numerosi come le pseudo-classes, di seguito vedremo quelli che vengono applicati più spesso.
<body>
<h1>Titolo</h1>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
::first-letter
::first-letter si utilizza quando si vuole modificare la prima lettera di un testo.
p::first-letter {
color: red;
font-size: 50px;
}
I pseudo-elements si applicano su tutti gli elementi che prendo come target; in questo caso verrebbero applicati a tutti i paragrafi.
::first-line
::first-line si utilizza quando si vuole cambiare cambiare lo stile alla prima riga di un testo
p::first-line {
font-weight: bold;
}
Non importa la dimensione del viewport, grazie a ::first-line verrà modificata sempre e solo la prima riga.
::before
::before si utilizza per aggiungere un contenuto prima del contenuto dell’elemento, il tutto avviene all’interno dell’elemento stesso . Ad esempio, se volessi aggiungere un’icona presente nella cartella delle immagini userei il seguente codice:
p::before {
content: url(img/check-mark.png);
}
::after
::after si utilizza per aggiungere un contenuto dopo il contenuto dell’elemento, anche in questo caso avviene all’interno dell’elemento stesso.
h1::after {
content: '';
display: block;
background: red;
width: 50%;
height: 5px;
}
Per mostrare i pseudo elements ::before e ::after è necessario aggiungere sempre la proprietà content, nel caso di after basta aggiungere due virgolette che funzionano da contenitore per mostrare il codice che segue. Guarda il video relativo a questo articolo su YouTube per capire meglio questi concetti.
Pseudo-Classes e Pseudo-Elements
CSS ci da la possibilità di combinare pseudo-classes e pseudo-elements, basta inserire la pseudo-class tra il selettore e il pseudo-element.
h1:hover::after {
content: '';
display: block;
position: absolute;
background: red;
width: 50%;
height: 5px;
}
I pseudo-elements ci permettono di modificare parte dell’elemento e aggiungere altri elementi all’interno dell’elemento stesso, il tutto viene eseguito con il CSS senza dover andare a intaccare il documento HTML mantenendo così la pagina più leggera; e questo è il super potere dei pseudo elements.
