:: prima lettera - Trucchi CSS

::first-letterè uno pseudo elemento che ti consente di definire lo stile della prima lettera in un elemento, senza la necessità di inserire un tag attorno a quella prima lettera nel tuo HTML. Anche se nessun tag viene aggiunto al DOM, è come se la prima lettera targetizzata fosse inclusa in un tag. Puoi modellare quella prima lettera come faresti con un elemento reale con:

p::first-letter ( font-weight: bold; color: red; )


The first letter is bold and red

Il risultato è come se avessi un elemento falso intorno alla prima lettera:


The first letter is bold and red.

La prima lettera è in grassetto e rossa

Lo pseudo elemento funziona solo se l'elemento genitore è un box contenitore a blocchi (in altre parole, non funziona sulla prima lettera degli display: inline;elementi).
Se hai sia a ::first-letterche ::first-linesu un elemento, la prima lettera erediterà dagli stili della prima riga, ma gli stili sulla ::first-lettersovrascriveranno quando gli stili entrano in conflitto.
Se generi contenuto con ::before, la prima lettera o il carattere di punteggiatura, sia che faccia parte del nodo di testo originale o sia creato con contenuto generato, sarà l'obiettivo.

Maggiori informazioni

Quando si utilizza per i capolettera, utilizzare insieme a in p:first-of-typemodo che non tutte le prime lettere abbiano uno stile
Penna di esempio - con contenuto generato
Wiki del W3C
Modulo selettori CSS3 W3C

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.