::first-letter
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
* Some parts of this feature may have varying levels of support.
Das ::first-letter CSS Pseudoelement wendet Stile auf den ersten Buchstaben der ersten Zeile eines Blockcontainers an, jedoch nur, wenn er nicht von anderem Inhalt (wie Bildern oder Inline-Tabellen) vorhergegangen wird.
Probieren Sie es aus
p::first-letter { font-size: 1.5rem; font-weight: bold; color: brown; } <p> Scientists exploring the depths of Monterey Bay unexpectedly encountered a rare and unique species of dragonfish. This species is the rarest of its species. </p> <p> When Robison and a team of researchers discovered this fish, they were aboard a week-long expedition. </p> Der erste Buchstabe eines Elements lässt sich nicht immer leicht identifizieren:
- Satzzeichen, die dem ersten Buchstaben vorausgehen oder unmittelbar folgen, werden in die Übereinstimmung einbezogen. Satzzeichen umfassen jedes Unicode-Zeichen, das in den Klassen open (Ps), close (Pe), initial quote (Pi), final quote (Pf) und other punctuation (Po) definiert ist.
- Einige Sprachen haben Digraphen, die immer zusammen großgeschrieben werden, wie das
IJim Niederländischen. In diesen Fällen sollten beide Buchstaben des Digraphen durch das::first-letter-Pseudoelement übereinstimmen. - Eine Kombination des
::before-Pseudoelements und dercontent-Eigenschaft kann am Anfang des Elements Text einfügen. In diesem Fall wird::first-letterden ersten Buchstaben dieses generierten Inhalts übereinstimmen.
Hinweis: CSS führte die ::first-letter-Schreibweise (mit zwei Doppelpunkten) ein, um Pseudoklassen von Pseudoelementen zu unterscheiden. Aus Gründen der Abwärtskompatibilität akzeptieren Browser auch :first-letter, das zuvor eingeführt wurde.
Die Unterstützung für Digraphen wie IJ im Niederländischen ist schlecht. Überprüfen Sie die untenstehende Kompatibilitätstabelle, um den aktuellen Stand der Unterstützung zu sehen.
Zulässige Eigenschaften
Nur eine kleine Untermenge von CSS-Eigenschaften kann mit dem ::first-letter-Pseudoelement verwendet werden:
- Alle Schrifteigenschaften:
font,font-style,font-feature-settings,font-kerning,font-language-override,font-stretch,font-synthesis,font-variant,font-variant-alternates,font-variant-caps,font-variant-east-asian,font-variant-ligatures,font-variant-numeric,font-variant-position,font-weight,font-size,font-size-adjust,line-heightundfont-family - Alle Hintergrundeigenschaften:
background,background-color,background-image,background-clip,background-origin,background-position,background-repeat,background-size,background-attachmentundbackground-blend-mode - Alle Randeigenschaften:
margin,margin-top,margin-right,margin-bottom,margin-left - Alle Innenabstandseigenschaften:
padding,padding-top,padding-right,padding-bottom,padding-left - Alle Rahmen-Eigenschaften: die Kurzschreibweise
border,border-style,border-color,border-width,border-radius,border-imageund die Langform-Eigenschaften - Die
color-Eigenschaft - Die
text-decoration,text-shadow,text-transform,letter-spacing,word-spacing(wenn geeignet),line-height,text-decoration-color,text-decoration-line,text-decoration-style,box-shadow,float,vertical-align(nur wennfloatnoneist) CSS-Eigenschaften
Syntax
::first-letter { /* ... */ } Beispiele
Grundlegendes Drop Cap
In diesem Beispiel verwenden wir das ::first-letter-Pseudoelement, um einen Drop-Cap-Effekt auf den ersten Buchstaben des Absatzes direkt nach dem <h2> zu erstellen.
HTML
<h2>My heading</h2> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. </p> <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. </p> CSS
p { width: 500px; line-height: 1.5; } h2 + p::first-letter { color: white; background-color: black; border-radius: 2px; box-shadow: 3px 3px 0 red; font-size: 250%; padding: 6px 3px; margin-right: 6px; float: left; } Ergebnis
Effekt auf spezielle Satzzeichen und nicht-lateinische Zeichen
Dieses Beispiel zeigt den Effekt von ::first-letter auf spezielle Satzzeichen und nicht-lateinische Zeichen.
HTML
<p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. </p> <p>-The beginning of a special punctuation mark.</p> <p>_The beginning of a special punctuation mark.</p> <p>"The beginning of a special punctuation mark.</p> <p>'The beginning of a special punctuation mark.</p> <p>*The beginning of a special punctuation mark.</p> <p>#The beginning of a special punctuation mark.</p> <p>「特殊的汉字标点符号开头。</p> <p>《特殊的汉字标点符号开头。</p> <p>"特殊的汉字标点符号开头。</p> CSS
p::first-letter { color: red; font-size: 150%; } Ergebnis
Gestaltung des ersten Buchstabens in einem SVG-Text-Element
In diesem Beispiel verwenden wir das ::first-letter-Pseudoelement, um den ersten Buchstaben eines SVG <text>-Elements zu gestalten.
Hinweis: Zum Zeitpunkt des Schreibens hat diese Funktion eingeschränkte Unterstützung.
HTML
<svg viewBox="0 0 300 40"> <text y="30">First letter in <text> SVG</text> </svg> CSS
text { font-family: sans-serif; } text::first-letter { font-family: serif; font-size: 2rem; font-weight: 600; fill: tomato; stroke: indigo; } Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |