::first-line
The ::first-line CSS pseudo-element selects the first line of text in an element for styling.
Overview
The ::first-line CSS pseudo-element selects the first line of text in an element for styling.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
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 2 item(s)
Implementation note
- Before Chrome 62, the `text-transform` property does not work on `::first-line` pseudo-elements. See bug 40214861.
- Previously available under a different name: :first-line (1)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :first-line (12)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :first-line (1)
Notes 2 item(s)
Implementation note
- The `text-transform` property does not work for `::first-line` or `:first-line` pseudo-elements. See bug 3409.
- Previously available under a different name: :first-line (1)
Notes 2 item(s)
Implementation note
- Before Chrome Android 62, the `text-transform` property does not work on `::first-line` pseudo-elements. See bug 40214861.
- Previously available under a different name: :first-line (18)
Notes 2 item(s)
Implementation note
- The `text-transform` property does not work for `::first-line` or `:first-line` pseudo-elements. See bug 3409.
- Previously available under a different name: :first-line (1)
Syntax
CSS
article p::first-line {
font-weight: bold;
font-size: 1.1em;
color: #1e3a5f;
}Live demo
Use cases
Using ::first-line
The ::first-line CSS pseudo-element selects the first line of text 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