initial-letter
The initial-letter CSS property sets the size and sink for dropped, raised, and sunken initial letters. This property applies to ::first-letter pseudo-elements and inline-level first children of block containers.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 110 | 110 | | 9 | 110 | 9 | |
normal | 110 | 110 | | 9 | 110 | 9 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
- See bug 229090 for the unprefixed property.
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Compatibility
- See bug 229090 for the unprefixed property.
Implementation note
- Does not support decimal values. See bug 296785.
Syntax
CSS
/* Drop cap with a height of 3 lines */
p::first-letter {
initial-letter: 3;
}
/* 3 lines high, 2 lines drop */
.drop-cap::first-letter {
initial-letter: 3 2;
font-weight: bold;
margin-right: 0.5em;
color: #c53030;
}Live demo
Use cases
-
Use initial-letter
Use initial-letter when the default CSS behavior is not expressive enough for the component or layout you are building.
-
Handle edge cases
Apply initial-letter to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test initial-letter in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using initial-letter does not make content harder to perceive, understand, or operate in assistive contexts.