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
Utilizzare WebJobs su Linux con Azure App Service
Creare una libreria CSS universale: Immagini
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Simulare Azure Cosmos DB in locale con Docker
Migliorare la scalabilità delle Azure Function con il Flex Consumption
Creare una libreria CSS universale: Nav menu
Gestione dell'annidamento delle regole dei layer in CSS
Anonimizzare i dati sensibili nei log di Azure Front Door
Gestire eccezioni nei plugin di Semantic Kernel in ASP.NET Core Web API
Eliminare una project wiki di Azure DevOps
Integrare SQL Server in un progetto .NET Aspire
Utilizzare Container Queries nominali
I più letti di oggi
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!