Gli pseudo-elementi :before e :after consentono di creare un elemento e di inserirlo prima o dopo l'elemento a cui la regola CSS si riferisce.
Si definiscono tali perché di fatto non cambiano il DOM, ma aggiungono elementi fantasma.
Il classico esempio è quello di aggiungere un contenuto prima o dopo un tab, come in questo esempio:
.separator:before { content: "|"; } .separator:after { content: "|"; }
L'effetto di questo codice è quello di aggiungere, prima e dopo l'elemento a cui si riferisce, un contenuto, che nel nostro caso è un carattere di separazione.
Senza l'utilizzo della proprietà content queste direttive non sono efficaci ed è necessario che sia sempre inclusa, anche se con valore vuoto ("").
Il valore di content può anche far riferimento ad un'immagine:
.separator:before { content: url(path.jpg); }
Le proprietà che possiamo includere all'interno ci consentono anche di trattare l'elemento inserito come se fosse un normale elemento della pagina, potendo assegnare padding, larghezza, altezza e così via.
Il supporto a questi elementi è disponibile da IE8+, Chrome 2+, FireFox 3.5+, Opera 9.2+, Safari 1.3+.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare form tipizzati con Angular
Utilizzare i nuovi piani dedicati di Azure Container Apps
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Sfruttare al massimo i topic space di Event Grid MQTT
Utilizzare Tailwind CSS all'interno di React: primi componenti
Usare lo spread operator con i collection initializer in C#
Generare token per autenicarsi sulle API di GitHub
Utilizzare la session affinity con Azure Container Apps
Gestire undefined e partial nelle reactive forms di Angular
Miglioramenti agli screen reader e al contrasto in Angular
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Utilizzare Model as a Service su Microsoft Azure