CSS Pseudo Elementi

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.


Guarda il video:

Articoli simili