Contenuto
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
[caniuse feature=”css-first-letter”]