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.

::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