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
Ottimizzazione dei block template in Angular 17
Utilizzare gli snapshot con Azure File shares
Generare file PDF da Blazor WebAssembly con iText
Routing statico e PreRendering in una Blazor Web App
Evitare la command injection in un workflow di GitHub
Sfruttare lo stream rendering per le pagine statiche di Blazor 8
Utilizzare la session affinity con Azure Container Apps
Eseguire query verso tipi non mappati in Entity Framework Core
Eseguire una query su SQL Azure tramite un workflow di GitHub
Determinare lo stato di un pod in Kubernetes
Reactive form tipizzati con FormBuilder in Angular
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary