initial-letter
A modern way to create 'drop caps' (large first letters at the start of a paragraph). You can specify how many lines high the letter should be and how many lines it should sink into the text.
Quick example
.intro-text::first-letter {
/* Makes the first letter 3 lines tall */
initial-letter: 3;
margin-right: 1.5rem;
}Quick facts
Initial value
normalInherited
No
Applies to
::first-letter pseudo-elements and inline-level first children
Animation type
byComputedValueType
Values
normal initial-letter Browser Support
Newly available Since 2024 91% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
110+
122+
9+
110+