initial-letter
The initial-letter CSS property sets the number of lines the first letter of an element occupies. You can use the property to make a raised capital or drop cap. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The initial-letter CSS property sets the number of lines the first letter of an element occupies. You can use the property to make a raised capital or drop cap. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 110 | 110 | | 9 | 110 | 9 | |
normal | 110 | 110 | | 9 | 110 | 9 |
- See bug 229090 for the unprefixed property.
- This browser only partially implements this feature
- See bug 229090 for the unprefixed property.
- Does not support decimal values. See bug 296785.
Syntax
/* 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.
Related links
Powered by web-features