8.1 Tipi di pseudoelementi
Gli pseudoelementi in CSS ti permettono di stilizzare parti specifiche degli elementi, come la prima lettera, la prima riga o aggiungere contenuto prima o dopo un elemento. Forniscono ulteriori possibilità di styling senza richiedere modifiche alla struttura HTML. Gli pseudoelementi sono indicati con doppio due punti (::).
Principali pseudoelementi:
::before::after::first-letter::first-line
8.2 Pseudoelemento ::before
Lo pseudoelemento ::before aggiunge contenuto prima del contenuto di un elemento. È spesso utilizzato per aggiungere elementi decorativi, icone o testo aggiuntivo.
Sintassi:
selettore::before {
content: "" | "testo" | url() | counter | attr();
proprietà: valore;
}
Nel campo content viene specificato il codice HTML da aggiungere.
/* Aggiunge una freccia prima di ogni elemento della lista */
li::before {
content: "→ ";
color: red;
}
<ul>
<li>Primo elemento della lista</li>
<li>Secondo elemento della lista</li>
<li>Terzo elemento della lista</li>
</ul>
8.3 Pseudoelemento ::after
Lo pseudoelemento ::after aggiunge contenuto dopo il contenuto di un elemento. È spesso utilizzato per aggiungere elementi decorativi, icone o testo aggiuntivo.
Sintassi:
selettore::after {
content: "" | "testo" | url() | counter | attr();
proprietà: valore;
}
Nel campo content viene specificato il codice HTML da aggiungere.
/* Aggiunge un punto dopo ogni elemento della lista */
li::after {
content: " •";
color: blue;
}
<ul>
<li>Primo elemento della lista</li>
<li>Secondo elemento della lista</li>
<li>Terzo elemento della lista</li>
</ul>
8.4 Pseudoelemento ::first-letter
Lo pseudoelemento ::first-letter si applica alla prima lettera di un elemento. È spesso utilizzato per creare lettere iniziali decorative nei paragrafi.
Sintassi:
selettore::first-letter {
content: "" | "testo" | url() | counter | attr();
proprietà: valore;
}
Esempio:
/* Ingrandisce e cambia colore alla prima lettera di ogni paragrafo */
p::first-letter {
font-size: 2em;
color: green;
}
<p>Questo è un esempio di testo in un paragrafo.</p>
<p>Un altro esempio di testo in un paragrafo.</p>
8.5 Pseudoelemento ::first-line
Lo pseudoelemento ::first-line si applica alla prima riga di un elemento. È spesso utilizzato per stilizzare la prima riga di un paragrafo.
Sintassi:
selettore::first-line {
content: "" | "testo" | url() | counter | attr();
proprietà: valore;
}
Esempio:
/* Cambia il colore e rende grassetto la prima riga di ogni paragrafo */
p::first-line {
color: navy;
font-weight: bold;
}
<p>
Questo è un esempio di testo in un paragrafo, che contiene abbastanza testo per essere suddiviso in più righe, dimostrando come funziona lo pseudoelemento ::first-line. La prima riga di ogni paragrafo sarà evidenziata in grassetto e con il colore navy, per attirare l'attenzione del lettore. Questo effetto è ottenuto tramite la regola CSS che abbiamo definito sopra.
</p>
<p>
Nota che la stilizzazione si applica solo alla prima riga, indipendentemente dalla sua lunghezza. Il resto del testo nel paragrafo mantiene il suo stile originale. Questo può essere utile per evidenziare punti chiave o creare un ritmo visivo nel testo.
</p>
GO TO FULL VERSION