CSS ::first-line pseudo selector

The ::first-line pseudo-element is for applying styles to the first line of an element. Imagine a paragraph that is several lines long.

::first-line allows you to style that first line of text. You could use it to make it larger or set it in small-caps as a stylistic choice. The amount of text targeted by this pseudo-element depends on the several factors like line length, viewport width, font-size, letter-spacing, word-spacing. As soon as the line breaks, the text after that is no longer selected. Note that there is no actual DOM element being selected here.

This pseudo-element only works on block-level elements (when display is set to either block, inline-block, table-caption, table-cell). If set on an inline element, nothing happens, even if that inline element has a line break within it.