Description

This pseudo-element represents the first formatted line of text in a block-level element, an inline block, a table caption, or a table cell. As with the :first-letter pseudo-element, the first line may actually occur inside a block-level child element.

The amount of text that’s represented by :first-line depends on how the text is rendered—it’s affected by factors like font size and line width. If the user changes the text size or the width of the browser window, more or fewer characters could become part of the pseudo-element.

Here’s an example rule set and HTML block:

p:first-line {
  text-transform: uppercase;
}

<p>This is a paragraph of text containing several lines of text.
How this text is broken up into lines by a user agent depends on
how the text is rendered, font properties, size of browser window,
and size of viewing device.</p>

The selector p:first-line will match the first line of text rendered by the user agent. We can see how a user agent might insert the pseudo-element into the HTML block like this:

<p><p:first-line>This is a paragraph of text</p:first-line>
containing several lines of text.
How this text is broken up into
lines by a user agent depends on
how the text is rendered, font
properties, size of browser
window, and size of viewing
device.</p>

The above markup isn’t valid HTML; it’s just a visualization of the pseudo-element concept.

If the first child node of an element is another block element, this pseudo-element will propagate to the child node. Here’s another example:

<div>
  <p>This is a paragraph of text containing several lines of text.
  How this text is broken up into lines by a user agent depends on
  how the text is rendered, font properties, size of browser
  window, and size of viewing device.</p>
</div>

Both the div:first-line and p:first-line selectors will be able to be matched in this case. The equivalent pseudo-markup is:

<div>
  <p>
    <div:first-line>
      <p:first-line>This is a paragraph of text</p:first-line>
    </div:first-line>
    containing several lines of text.
    How this text is broken up into
    lines by a user agent depends on
    how the text is rendered, font
    properties, size of browser
    window, and size of viewing
    device.</p>
</div>