Come funzionano?

Le pseudo classi ::before e ::after possono essere utilizzati per aggiungere elementi stilistici ad un elemento senza l'aggiunta di ulteriore markup, questo permette di ottenere codice HTML più pulito e poter gestire lo stile di un elemento sempre e solo dal suo relativo CSS.

Di seguito mostreremo un piccolo esempio di come le 2 classi possono essere utilizzate.

Esempio su jsFiddle

Come si può notare nell'inspector della pagine, le pseudo classi vengono applicate all'elemento non come si potrebbe pensare e cioè prima e dopo l'elemento stesso ma vengono applicate al contenuto dell'elemento, quindi è ovvio pensare che lo stile o il content, che dopo andremo ad analizzare, vengano applicati all'interno della classe contenitore e non esternamente ad essa. 

Ci teniamo a ricordare che queste pseudo classi non vengono applicate ad elementi stilistici come i tag HTML img in quanto i tag stessi sono contenuti e non contenitori.


Cos'è la proprietà content?

L'elemento css content può essere utilizzato in svariati modi come abbiamo potuto notare al link precedente, ricordando però che può essere utilizzato solamente se associato alle pseudo classi ::before e ::after.

Si definisce anch'esso pseudo classe in quanto non viene utilizzato per selezionare qualcosa di già presente nel contenuto della pagina ma aggiunge qualcosa alla pagina che precedentemente mancava.


Come utilizzarle le pseudo classi come elementi di design?

Le pseudo classi ::before e ::after si possono impiegare come elementi stilistici in modo semplice ed efficace sia per elaborare semplici elementi relativi al testo, sia per applicare elementi a card, contenitori di testo, contenitori di immagini (ma non alle immagini in modo diretto) o a qualsiasi elemento contenitivo, alleghiamo un link di esempio di ciò che si può creare con tali pseudo classi.

Elementi stilistici con le pseudo classi

Autore

Alessio B.

Tags

#Sass #Scss #CSS #Grafica

Pubblicato il

18.10.2018

Ultimo aggiornamento

18.10.2018