:: Anfangsbuchstabe - CSS-Tricks

::first-letterist ein Pseudoelement, mit dem Sie den ersten Buchstaben eines Elements formatieren können, ohne ein Tag um diesen ersten Buchstaben in Ihrem HTML-Code anbringen zu müssen. Während dem DOM keine Tags hinzugefügt werden, ist es so, als ob der angestrebte erste Buchstabe in einem Tag enthalten wäre. Sie können diesen ersten Buchstaben wie ein echtes Element gestalten mit:

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


The first letter is bold and red

Das Ergebnis ist, als hätten Sie ein falsches Element um den ersten Buchstaben:


The first letter is bold and red.

Der erste Buchstabe ist fett und rot

Das Pseudoelement funktioniert nur, wenn das übergeordnete Element eine Blockcontainerbox ist (mit anderen Worten, es funktioniert nicht mit dem ersten Buchstaben von display: inline;Elementen.)
Wenn Sie sowohl ein ::first-letterals auch ::first-lineein Element haben, erbt der erste Buchstabe von den ersten Zeilenstilen, aber die Stile auf ::first-letterüberschreiben, wenn Stile in Konflikt stehen.
Wenn Sie Inhalte mit generieren ::before, ist der erste Buchstabe oder das erste Interpunktionszeichen das Ziel, unabhängig davon, ob es Teil des ursprünglichen Textknotens ist oder mit generiertem Inhalt erstellt wurde.

Mehr Informationen

Bei Verwendung für Drop-Caps in Verbindung mit verwenden, p:first-of-typedamit nicht jeder erste Buchstabe gestylt wird
Beispielstift - mit generiertem Inhalt
W3C Wiki
W3C CSS3-Auswahlmodul

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.