::first-line

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 element, width of the document, and the font size of the text. As all pseudo-elements, ::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-kerning, font-style, font-variant, font-variant-numeric, font-variant-position, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-synthesis, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family
• the color property
• all background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode
• word-spacing, letter-spacing, text-decoration, text-transform, and line-height
• text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.

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.

Syntax

/* CSS3 syntax */
::first-line { style properties }

/* CSS2 syntax */
:first-line { style properties }

Examples

text-transform

Change the letters of the first line of every paragraph to uppercase.

HTML Content

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.</p>

CSS Content

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

Output

margin-left

Does nothing, margin-left cannot be applied to a first-line pseudo-element.

HTML Content

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.</p>

CSS Content

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

Output

text-indent

Does nothing, text-indent cannot be applied to a first-line pseudo-element.

HTML Content

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.</p>

CSS Content

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

Output

Specifications

Specification	Status	Comment
CSS Pseudo-Elements Level 4 The definition of '::first-line' in that specification.	Working Draft	Defined more strictly where it can occur. Generalized allowed properties to typesetting, text decoration and inline layout properties and opacity Defined the inheritance of ::first-letter.
CSS Text Decoration Module Level 3 The definition of 'text-shadow with ::first-line' in that specification.	Candidate Recommendation	Allowed the usage of text-shadow with ::first-letter.
Selectors Level 3 The definition of '::first-line' in that specification.	Recommendation	The definition of what is the first line of an element has been reworded. The two-colon syntax for pseudo-elements has been introduced.
CSS Level 2 (Revision 1) The definition of '::first-line' in that specification.	Recommendation	No significant change, though CSS Level 2 still used the one-colon syntax.
CSS Level 1 The definition of '::first-line' in that specification.	Recommendation	The initial definition used the one-colon syntax.

Browser compatibility

[1] The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See Chromium bug 129669.

[2] Since Opera 15.0 (due to the switch to Blink) the text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See Chromium bug 129669.

[3] The text-transform property does not work for ::first-line pseudo-elements (also not for the old one-colon syntax). See WebKit bug 3409.

See also

• The ::first-letter pseudo-element.