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
Gestire il colore CSS con HWB
Cancellare una run di un workflow di GitHub
Evitare la script injection nelle GitHub Actions
Creare form tipizzati con Angular
Usare una container image come runner di GitHub Actions
Sostituire la GitHub Action di login su private registry
Verificare la provenienza di un commit tramite le GitHub Actions
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare la session affinity con Azure Container Apps
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Come EF 8 ha ottimizzato le query che usano il metodo Contains
.NET Conference Italia 2023