CSS - ::first-line (: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.
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
Syntax
/* CSS3 syntax */ ::first-line { <var>style properties</var> } /* CSS2 syntax */ :first-line { <var>style properties</var> }
Description
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
, andfont-family
- the
color
property - all background-related properties:
background-color
,background-clip
,background-image
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
, andbackground-blend-mode
word-spacing
,letter-spacing
,text-decoration
,text-transform
, andline-height
text-shadow
,text-decoration
,text-decoration-color
,text-decoration-line
,text-decoration-style
, andvertical-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.
In CSS 2, pseudo-elements were prefixed with a single colon character. As pseudo-classes were also following the same convention, they were indistinguishable. To solve this, CSS 2.1 changed the convention for pseudo-elements. Now a pseudo-element is prefixed with two colon characters, and a pseudo-class is still prefixed with a single colon.
As several browsers already implemented the CSS 2 version in a release version, all browsers supporting the two-colon syntax also support the old one-colon syntax.
If legacy browsers must be supported, :first-line
is the only viable choice; if not, ::first-line
is preferred.
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 1.0 (buggy when using text-transform : issue 129669) |
1.0 (1.7 or earlier) | 9.0 | 7.0 | 1.0 (85) (buggy when using text-transform : issue 3409) |
Old one-colon syntax (:first-line ) |
1.0 (buggy when using text-transform : issue 129669) |
1.0 (1.7 or earlier) | 5.5 | 3.5 | 1.0 (85) (buggy when using text-transform : issue 3409) |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | 1.0 (1) | No support | ? | ? |
Old one-colon syntax (:first-line ) |
? | 1.0 (1) | ? | ? | ? |
See Also
- The
::first-letter
pseudo-element.
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 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. |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/::first-line