::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 July 2015.
* Some parts of this feature may have varying levels of support.
Das ::first-letter
CSS Pseudo-Element wendet Stile auf den ersten Buchstaben der ersten Zeile eines Block-Containers an, jedoch nur, wenn diesem kein anderer Inhalt (wie Bilder oder Inline-Tabellen) vorausgeht.
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 ist nicht immer leicht zu identifizieren:
- Satzzeichen, die dem ersten Buchstaben vorausgehen oder ihm unmittelbar folgen, werden in der Übereinstimmung einbezogen. Satzzeichen umfassen alle Unicode-Zeichen, die in den Klassen open (Ps), close (Pe), initial quote (Pi), final quote (Pf) und other punctuation (Po) definiert sind.
- Einige Sprachen haben Digraphen, die immer zusammen großgeschrieben werden, wie das
IJ
im Niederländischen. In diesen Fällen sollten beide Buchstaben des Digraphen vom::first-letter
Pseudo-Element erfasst werden. - Eine Kombination des
::before
Pseudo-Elements und dercontent
Eigenschaft kann am Anfang des Elements Text einfügen. In diesem Fall wird::first-letter
den ersten Buchstaben dieses erzeugten Inhalts erfassen.
Hinweis:
CSS führte die ::first-letter
Notation (mit zwei Doppelpunkten) ein, um zwischen Pseudo-Klassen und Pseudo-Elementen zu unterscheiden. Aus Gründen der Abwärtskompatibilität akzeptieren Browser auch :first-letter
, das früher eingeführt wurde.
Die Browserunterstützung für Digraphen wie IJ
im Niederländischen ist schlecht. Überprüfen Sie die Kompatibilitätstabelle unten, um den aktuellen Stand der Unterstützung zu sehen.
Zulässige Eigenschaften
Nur eine kleine Teilmenge von CSS-Eigenschaften kann mit dem ::first-letter
Pseudo-Element verwendet werden:
- Alle Schriftart-Eigenschaften:
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-height
undfont-family
- Alle Hintergrund-Eigenschaften:
background
,background-color
,background-image
,background-clip
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
, undbackground-blend-mode
- Alle Rand-Eigenschaften:
margin
,margin-top
,margin-right
,margin-bottom
,margin-left
- Alle Innenabstands-Eigenschaften:
padding
,padding-top
,padding-right
,padding-bottom
,padding-left
- Alle Rahmen-Eigenschaften: die Kurzformen
border
,border-style
,border-color
,border-width
,border-radius
,border-image
, und die Langformen - Die
color
Eigenschaft - Die
text-decoration
,text-shadow
,text-transform
,letter-spacing
,word-spacing
(wenn zutreffend),line-height
,text-decoration-color
,text-decoration-line
,text-decoration-style
,box-shadow
,float
,vertical-align
(nur wennfloat
aufnone
gesetzt ist) CSS-Eigenschaften
Syntax
::first-letter {
/* ... */
}
Beispiele
Einfacher Initialbuchstabe
In diesem Beispiel verwenden wir das ::first-letter
Pseudo-Element, um einen Initialbuchstabeneffekt auf den ersten Buchstaben des Absatzes direkt nach dem <h2>
zu erzeugen.
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 veranschaulicht die Wirkung 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
Stil des ersten Buchstabens in einem SVG-Text-Element
In diesem Beispiel verwenden wir das ::first-letter
Pseudo-Element, um den ersten Buchstaben eines SVG-<text>
-Elements zu gestalten.
Hinweis: Zum Zeitpunkt der Erstellung hat dieses Feature 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 |