The First-Line Pseudo-Element

The First Line pseudo-element styles the first line of a block-level element.

This selector is supported in Windows IE 5.5 or above, and of course, all modern browsers.

Note that this effect extends to the first line of a block as rendered by the user agent. For example, as the browser window width is narrowed or widened, the :FIRST-LINE pseudo-class will target words as needed to limit the styled text to the first line of the block.

General Syntax for First-Line Pseudo-Element

block-element:first-line { declarations... }

For the following example, the first line of the paragraph will be displayed in small-caps.

Example Style sheet

p:first-line {
   font-variant: small-caps;
   color: #960;
   }

Example Markup

<p>
  Note how the :FIRST-LINE pseudo-element limits the styled
  text to the first rendered line of the paragraph, even as you
  adjust the width of the browser window. Lorem ipsum dolor sit amet,
  consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar
  diam et nulla. Praesent mauris risus, lacinia in, consequat et,
  adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac,
  facilisis a, ugue.
</p>

Rendered Example

Note how the :FIRST-LINE pseudo-element limits the styled text to the first rendered line of the paragraph, even as you adjust the width of the browser window. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis felis. Sed pulvinar diam et nulla. Praesent mauris risus, lacinia in, consequat et, adipiscing ut, leo. Morbi neque ante, pharetra et, pulvinar ac, facilisis a, ugue.

Pseudo-Elements