The ::First-Line Pseudo-Element

The ::first-line pseudo-element is used to add a special style to the first line of a text. The following example formats the first line of the text in all <p> elements:

HTML file: Displayed by browser:
<style>
p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}
</style>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. This is the first paragraph on this webpage. Some more text. And even more, and more.</p>

<p>The second paragraph will be affected the exact same way, so you can have a very consistent look throughout a webpage. Some more text. And even more, and more.</p>
</body>

You can use the ::first-line pseudo-element to add a special effect to the first line of a text. This is the first paragraph on this webpage. Some more text. And even more, and more.

The second paragraph will be affected the exact same way, so you can have a very consistent look throughout a webpage. Some more text. And even more, and more.

The following properties apply to the ::first-line pseudo-element:
  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
Note: The ::first-line pseudo-element can only be applied to block-level elements.

Back button Table of Contents Next button