::first-line

Il pseudo-elemento ::first-line può essere utilizzato per applicare uno stile alla prima riga di testo di un elemento. Mettiamo caso di avere un paragrafo di testo lungo varie righe, con ::first-line possiamo applicare uno stile solamente alla prima riga di quel paragrafo.

Per esempio, può essere utilizzato per ingrandire il testo, trasformarlo in maiuscolo o applicare qualsiasi altra scelta stilistica che si possa voler fare.

La quantità di testo che verrà modificata dal selettore dipende da molti fattori, tra cui la dimensione della finestra, la lunghezza della riga, le dimensioni del carattere, la spaziatura tra le lettere o le parole, ecc. Non appena la riga si interrompe, il testo successivo non sarà più oggetto di modifiche.

Questo pseudo-elemento funziona solamente su elementi a livello block, quindi nei casi in cui la proprietà display è impostata su block, inline-block, table-caption o table-cell. Sugli elementi inline non ci sarà nessun effetto.

Tieni presente anche che non tutte le proprietà possono essere utilizzate all’interno della regola ::first-line. Principalmente si utilizzano le seguenti regole:

font-style: ...
font-variant: ...
font-weight: ...
font-size: ...
font-family: ...

line-height: ...
color: ...
word-spacing: ...
letter-spacing: ...
text-decoration: ...
text-transform: ...

background-color: ...
background-image: ...
background-position: ...
background-repeat: ...
background-size: ...
background-attachment: ...

La specifica ufficiale CSS comunque fornisce agli User Agent di consentre l’utilizzo di altre proprietà nel caso lo ritenessero opportuno.

Specificità

Lo stile CSS impostato con ::first-line è in grado di sovrascrivere qualsiasi altra regola, anche quelle che utilizzano !important.

Questo è dovuto al fatto che uno pseudo-elemento viene trattato come un elemento figlio e non solamente come una parte dell’elemento genitore. Di conseguenza, le regole vengono applicate solamente a quell’elemento, e le regole del genitore si aggiungono in cascata.

Supporto dei Browser

Il numero indica la versione minima del browser in cui la feature sia supportata. Per ottenere maggiori informazioni, passare con il mouse sopra la versione.

Desktop

chrome
Google Chrome
9
firefox
Mozilla Firefox
3.5
ie
Internet Explorer
9
edge
Microsoft Edge
12
opera
Opera
11
safari
Apple Safari
5.1

Mobile / Tablet

and_chr
Android Chrome
104
and_ff
Android Firefox
101
android
Android
3
samsung
Samsung Internet
4
op_mob
Opera Mobile
12
ios_saf
iOS Safari
5.0

Queste statistiche sul supporto da parte dei browser provengono da Caniuse, che potete visitare per informazioni più dettagliate.