first-line property CSS Reference

Definition and Usage

The ::first-line CSS pseudo-element applies styles only to the first line of an element. The amount of the text on the first line depends of numerous factors, like the width of the elements or of the document, but also of the font size of the text. As all pseudo-elements, the selectors containing ::first-line does not match any real HTML element.

A first line has only meaning in a block-container box, therefore the ::first-line pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell or table-caption. In all other cases, ::first-line has no effect.

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::first-line pseudo-element:

• all font-related properties: font, font-style, font-variant, font-weight, font-size, line-height and font-family
• the color property
• all background-related properties: background-color, background-image, background-position, background-repeat, background-size, and background-attachment
• word-spacing, letter-spacing, text-decoration, text-transform, and line-height
• text-shadow.

As this list will be extended in the future, it is recommended that you not use any other properties inside the declaration block, in order to keep the CSS future-proof.

Examples

p::first-line { text-transform: uppercase }

p::first-line { margin-left: 20px }

p::first-line { text-indent: 20px }

Compatibility

Desktop browsers

Mobile browsers