W3cubDocs

/CSS

::first-line

The ::first-line CSS pseudo-element applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text.

/* Selects the first line of a <p> */
p::first-line {
  color: red;
}

CSS3 introduced the ::first-line notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :first-line, introduced in CSS2.

Allowable properties

Only a small subset of CSS properties can be used with 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
All background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode
The color property
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.

Syntax

/* CSS3 syntax */
::first-line

/* CSS2 syntax */
:first-line

Example

HTML

<p>Styles will only be applied to the first line of this paragraph.
After that, all text will be styled like normal. See what I mean?</p>

<span>The first line of this text will not receive special styling
because it is not a block-level element.</span>

CSS

::first-line {
  color: blue;
  text-transform: uppercase;


  /* WARNING: DO NOT USE THESE */
  /* Many properties are invalid in ::first-line pseudo-elements */
  margin-left: 20px;
  text-indent: 20px;
}

Result

Specifications

Specification	Status	Comment
CSS Pseudo-Elements Level 4 The definition of '::first-line' in that specification.	Working Draft	Defines more strictly where `::first-letter` can occur. Generalizes allowed properties to typesetting, text decoration, and inline layout properties and `opacity`. Defines the inheritance of `::first-letter`.
CSS Text Decoration Module Level 3 The definition of 'text-shadow with ::first-line' in that specification.	Candidate Recommendation	Allows the use of `text-shadow` with `::first-letter`.
Selectors Level 3 The definition of '::first-line' in that specification.	Recommendation	Introduction of the two-colon syntax.
CSS Level 2 (Revision 1) The definition of '::first-line' in that specification.	Recommendation	No change.
CSS Level 1 The definition of '::first-line' in that specification.	Recommendation	Initial definition, using the one-colon syntax.

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	1 1 Before Chrome 62, the `text-transform` property does not work on `::first-line` pseudo-elements. See Chromium bug 129669. 1 Before Chrome 62, the `text-transform` property does not work on `::first-line` pseudo-elements. See Chromium bug 129669. Uses the non-standard name: `:first-line`	Yes Yes Yes Uses the non-standard name: `:first-line`	1 1 1 Uses the non-standard name: `:first-line`	9 9 5.5 Uses the non-standard name: `:first-line`	7 7 From Opera 15 to Opera 49 (exclusive), the `text-transform` property does not work on `::first-line` or `:first-line` pseudo-elements. See Chromium bug 129669. 3.5 From Opera 15 to Opera 49 (exclusive), the `text-transform` property does not work on `::first-line` or `:first-line` pseudo-elements. See Chromium bug 129669. Uses the non-standard name: `:first-line`	1 1 The `text-transform` property does not work for `::first-line` or `:first-line` pseudo-elements. See WebKit bug 3409. 1 The `text-transform` property does not work for `::first-line` or `:first-line` pseudo-elements. See WebKit bug 3409. Uses the non-standard name: `:first-line`

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	Yes	?	Yes Yes Yes Uses the non-standard name: `:first-line`	4 4 4 Uses the non-standard name: `:first-line`	?	?	?