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
normalinitial-letter Browser Support
Limited availability91% global usage
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
110+
110+