This pseudo-element is used to apply properties to the first rendered line
of a block element structure on the output device (browser screen, printer,
etc.) This pseudo-element does not actually exist as part of the document
tree - it is a "fictional tag sequence" that is logically deduced from
many factors including font size, page and block width, as well as content
language, etc. It is similar in behavior to an in-line element, but
restrictions are placed on its behavior (see Notes below.)
Example
Ext/Doc: p:first-line
{ margin-left: 0.5in }
In-Line: NA
Notes
CSS2 places restrictions on what properties can be applied to 'first-line'
pseudo-elements: font properties, color and background properties, and
the 'word-spacing', 'letter-spacing', 'text-decoration', 'text-shadow',
'text-transform', 'line-height', 'clear' and 'vertical-align' properties.
In the fictional tag sequences defined by the 'first-letter' and
'first-line' pseudo-elements, the 'first-letter' fictional sequence
is contained inside the 'first-line' fictional tag sequence; this
allows properties applied to 'first-line' to properly cascade and
apply to the 'first-letter' pseudo element unless overridden.
CSS1 Conformance: A browser may ignore the
':first-line' Pseudo-element.
Browser Peculiarities
Opera
3.5+:
- This Pseudo-element only applies to block elements, and
UL/OL/LI, DL/DT/DD, and TABLE/TD/TH.
- When applied to LI items it applies the CSS rule to the
entire UL/OL list, not just the LI.