Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:first-line

[CSS Selector] E:first-line

Using selector:first-line, you can apply styles to the first rendered line of an element. This is commonly called a "pseudo-element." It does not work in IE8 or earlier.

Note that this applies to the first line as rendered by the browser, not the first line in the source code. Additionally, :first-line only works when the display property is set to block, inline-block, table-cell, table-caption, etc. It does not apply to inline elements.

Sample Code

style.css

/* make the first line red */
p:first-line { color: red;}

/* make the first line bold and slightly larger */
p:first-line { font-weight: bold; font-size: 1.1em;}

/* apply a different color to the first line of article paragraphs */
.article p:first-child::first-line { color: #2c3e50; letter-spacing: 0.05em;}

/* uppercase the first line (e.g., poetry) */
.poem:first-line { text-transform: uppercase;}

Browser Preview

p:first-line { color: red;} /* Makes the first rendered line red. */

<p>
	The first rendered line becomes red.
	Note that this is not the first line of the source code.<br>
</p>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

11 ○

10 ○

9 ○

8 △

7 △

6 △

Opera

7+ ○

6 △

5 △

4 △

↑ Supported as ':first-line'

2 or earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 or earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version data based on MDN.

If you find any errors or copyright issues, please contact us.

Home