CSS ::first-letter / Initiale oder Drop Cap

first-line und first-letter

::first-line und ::first-letter bringen typografische Extras wie größere oder farbig abgesetzte Schrift zu Teilen eines Textes, ohne dafür HTML-Elemente wie <span> einzusetzen. Beide Eigenschaften wirken nur auf Block-Elemente wie div, p oder h1, sowie auf Elemente, die mit display: block, display: inline-block, display: table als Block-Elemente dargestellt werden.

Ein häufig vorkommendes Beispiel für den Wunsch, das erste Zeichen eines Textes größer zu setzen, ist das Symbol für Telefon in der Telefonnummer, viel zu klein neben dem Text erscheint.

✆ 01234 24567890

✆ 01234 24567890

<p class="phone">✆ 01234 24567890<p>

.phone::first-letter {
	font-size: 140%;
}

::first-line – erste Zeile eine Textblocks

::first-line stylt die erste Zeile eines Textabschnitts, gleich, wie lang der Textbock tatsächlich ist.

p::first-line {
	font-size: 1.4rem;
	font-weight: bold;
	color: cornflowerblue;
	text-transform: uppercase;
}

Dabei wirken nur Textstile wie color, font-weight, letter-spacing, aber keine Blockstile wie margin, padding, background oder display!

Die erste Zeile eines über mehrere Zeilen laufenden Texts wird mit ::first-line gesondert gestylt.

Um inline-Elemente wie z.B. label mit ::first-line zu erreichen, kann display:inline-block oder display:block verwendet werden.

::first-letter – erster Buchstabe

::first-letter stylt den ersten Buchstaben eines Textes z.B. als Drop Cap wie in Büchern oder Zeitungen.

p::first-letter {
	font-size: 3em;
	font-weight: bold;
	color: blue;
	float: left;
	margin-right: 10px;
}

Absatz mit einem vergrößerten ersten Buchstaben

initial-letter – bessere Drop Caps / Initiale

Die Eigenschaft initial-letter wird zwar noch nicht von allen modernen Browsern erkannt, wohl aber zumindest in Teilen von Chrome und Safari (mit -webkit-Präfix). initial-letter steuert Drop Caps genauer und ohne float oder position:

p {
  font-size: 16px;
}

p::first-letter {
  initial-letter: 2 2;
  -webkit-initial-letter: 2;
  color: darkred;
}

Die Werte 2 2 bedeuten, dass der Buchstabe über zwei Zeilen mit der Breite von zwei normalen Buchstaben läuft. Dabei wird der Zeilenabstand automatisch angepasst.

Absatz mit einem vergrößerten ersten Buchstaben