::first-line CSS pseudo-element

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

The ::first-line CSS pseudo-element applies styles to the first line of a block container.

Try it

p::first-line {
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: underline;
}
<p>
  In warm ocean waters around the world, you may see a strange sight: A fish
  leaping from the water and soaring dozens of meters before returning to the
  ocean's depths. Early Mediterranean sailors thought these flying fish returned
  to the shore at night to sleep, and therefore called this family of marine
  fish Exocoetidae.
</p>

The effects of ::first-line are limited by the length and content of the first line of text in the element. 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. ::first-line has no effect when the first child of the element, which would be the first part of the first line, is an inline block-level element, such as an inline table.

Note: Selectors Level 3 introduced the double-colon notation (::) to distinguish pseudo-elements from the single-colon (:) pseudo-classes. Browsers accept both ::first-line and :first-line, which was introduced in CSS2.

For the purposes of CSS background, the ::first-line pseudo-element is like an inline-level element meaning that in a left-justified first line, the background may not extend all the way to the right margin.

Allowable properties

Only a small subset of CSS properties can be used with the ::first-line pseudo-element:

Syntax

css
::first-line {
  /* ... */
}

Examples

Styling first line of a paragraph

HTML

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

css
::first-line {
  color: blue;
  font-weight: bold;

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

Result

Styling the first line of a SVG text element

In this example, we style the first line of an SVG <text> element using the ::first-line pseudo-element.

Note: At time of writing this feature has limited support.

HTML

html
<svg viewBox="0 0 320 150">
  <text y="20">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
  </text>
</svg>

CSS

In order to make the SVG <text> element wrap to multiple lines, we use the white-space CSS property. We then select the first line using the ::first-line pseudo-element.

css
text {
  white-space: break-spaces;
}

text::first-line {
  fill: blue;
  font-weight: bold;
}

Result

Specifications

Specification
CSS Pseudo-Elements Module Level 4
# first-line-pseudo

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::first-line
Chrome – Full support
Chrome 1 (Release date: 2008-12-11)
footnote , altname
altname Alternate name: :first-line
footnote Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See bug 40214861.
Chrome – Full support
Chrome 1 (Release date: 2008-12-11)
footnote
footnote Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See bug 40214861.
Edge – Full support
Edge 12 (Release date: 2015-07-29)
altname
altname Alternate name: :first-line
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 1 (Release date: 2004-11-09)
altname
altname Alternate name: :first-line
Firefox – Full support
Firefox 1 (Release date: 2004-11-09)
footnote Full support
Opera – Full support
Opera 3.5 (Release date: 1998-11-18)
footnote , altname
altname Alternate name: :first-line
footnote From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See bug 40214861.
Opera – Full support
Opera 7 (Release date: 2003-01-28)
footnote
footnote From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See bug 40214861.
Safari – Full support
Safari 1 (Release date: 2003-06-23)
footnote , altname
altname Alternate name: :first-line
footnote The text-transform property does not work for ::first-line or :first-line pseudo-elements. See bug 3409.
Safari – Full support
Safari 1 (Release date: 2003-06-23)
footnote
footnote The text-transform property does not work for ::first-line or :first-line pseudo-elements. See bug 3409.
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote , altname
altname Alternate name: :first-line
footnote Before Chrome Android 62, the text-transform property does not work on ::first-line pseudo-elements. See bug 40214861.
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote
footnote Before Chrome Android 62, the text-transform property does not work on ::first-line pseudo-elements. See bug 40214861.
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
altname
altname Alternate name: :first-line
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 10.1 (Release date: 2010-11-09)
footnote , altname
altname Alternate name: :first-line
footnote From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See bug 40214861.
Opera Android – Full support
Opera Android 10.1 (Release date: 2010-11-09)
footnote
footnote From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See bug 40214861.
Safari on iOS – Full support
Safari on iOS 1 (Release date: 2007-06-29)
footnote , altname
altname Alternate name: :first-line
footnote The text-transform property does not work for ::first-line or :first-line pseudo-elements. See bug 3409.
Safari on iOS – Full support
Safari on iOS 1 (Release date: 2007-06-29)
footnote
footnote The text-transform property does not work for ::first-line or :first-line pseudo-elements. See bug 3409.
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote , altname
altname Alternate name: :first-line
footnote Before Samsung Internet 8.0, the text-transform property does not work on ::first-line pseudo-elements. See bug 40214861.
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote
footnote Before Samsung Internet 8.0, the text-transform property does not work on ::first-line pseudo-elements. See bug 40214861.
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote , altname
altname Alternate name: :first-line
footnote Before WebView Android 62, the text-transform property does not work on ::first-line pseudo-elements. See bug 40214861.
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote
footnote Before WebView Android 62, the text-transform property does not work on ::first-line pseudo-elements. See bug 40214861.
WebView on iOS – Full support
WebView on iOS 1 (Release date: 2007-06-29)
footnote , altname
altname Alternate name: :first-line
footnote The text-transform property does not work for ::first-line or :first-line pseudo-elements. See bug 3409.
WebView on iOS – Full support
WebView on iOS 1 (Release date: 2007-06-29)
footnote
footnote The text-transform property does not work for ::first-line or :first-line pseudo-elements. See bug 3409.
Support on SVG <text> element
Chrome – No support
Chrome
footnote No support
Edge – No support
Edge
footnote No support
Firefox – Full support
Firefox 124 (Release date: 2024-03-19)
footnote Full support
Opera – No support
Opera
footnote No support
Safari – No support
Safari
footnote No support
Chrome Android – No support
Chrome Android
footnote No support
Firefox for Android – Full support
Firefox for Android 124 (Release date: 2024-03-19)
footnote Full support
Opera Android – No support
Opera Android
footnote No support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – No support
Samsung Internet
footnote No support
WebView Android – No support
WebView Android
footnote No support
WebView on iOS – No support
WebView on iOS
footnote No support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name
Has more compatibility info.

See also