::first-letter
The ::first-letter CSS pseudo-element selects the first letter in an element for styling.
Overview
The ::first-letter CSS pseudo-element selects the first letter in an element for styling.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
dutch ij digraph Support for the Dutch digraph `IJ` | | | 87 | | | |
svg text element Support on SVG `<text>` element | | | 124 | | | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :first-letter (1)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :first-letter (12)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :first-letter (1)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :first-letter (1)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :first-letter (18)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :first-letter (1)
Syntax
CSS
article p:first-of-type::first-letter {
font-size: 3em;
float: left;
line-height: 1;
margin-right: 0.1em;
}Live demo
Use cases
Using ::first-letter
The ::first-letter CSS pseudo-element selects the first letter in an element for styling.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features