Con il termine Pseudo-element ci riferiamo a delle aree all'interno di ogni elemento HTML accessibili solo attraverso CSS. Grazie a queste zone possiamo applicare effetti grafici, inserire o modificare lo stile di un testo senza dover intervenire sul codice HTML. Il risultato sarà quindi visibile solo una volta che la pagina verrà caricata all'interno del browser.
Per accedere a queste aree, la sintassi richiesta è la seguente
selettore::pseudo-element { proprietà: valore; }
La versione canonica prevede l'utilizzo di ::, ma dato che alla nascita di questi selettori veniva utilizzato un singolo :, tutti i browser supportano entrambe le sintassi.
I più famosi pseudo-element sono ::before e ::after. Come si può intendere dal nome sono due aree che si trovano prima e dopo il contenuto HTML dell'elemento. Sono spesso utilizzati per creare forme che vanno ad arricchire esteticamente il layout, o in alcuni casi usati come labels, consentendoci di non appesantire il codice HTML e presentare lo stesso contenuto, con lo stesso stile, all'interno di tutta la nostra applicazione, come nel caso seguente
<style> p.memo::before { content: "Memo"; display: block; font-size: 0.8rem; font-style: italic; } </style> <p class="memo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque iaculis gravida. Nullam ligula lectus, ultricies vitae lectus a, aliquam luctus nisi.</p>
Se caricato all'interno di un browser il codice mostrerà un paragrafo nella cui parte superiore verrà inserita la parola "Memo" con un font ridotto e uno stile corsivo.
A volte capita di imbattersi anche in ::first-letter e ::first-line, questi consentono di modificare lo stile per la prima lettera, o la prima linea presente in un elemento, utili per creare particolari effetti stilistici. Lo snippet seguente ingrandirà la prima lettera del paragrafo, ottenendo un effetto "manoscritto"
<style> p{ line-height: 2rem; } p::first-letter { float: left; font-size: 3rem; } </style> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque iaculis gravida. Nullam ligula lectus, ultricies vitae lectus a, aliquam luctus nisi.</p>
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare i primary constructor di C# per inizializzare le proprietà
Gestire domini wildcard in Azure Container Apps
Elencare le container images installate in un cluster di Kubernetes
Miglioramenti agli screen reader e al contrasto in Angular
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Usare una container image come runner di GitHub Actions
Sfruttare i KeyedService in un'applicazione Blazor in .NET 8
Eseguire le GitHub Actions offline
Generare file PDF da Blazor WebAssembly con iText
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Gestire i null nelle reactive form tipizzate di Angular