Styling the First Line of Text with the ::first-line Pseudo-Element in CSS

::first-line Pseudo-element

The ::first-line pseudo-element in CSS allows you to style the first line of text within a block-level element. It's commonly used for customizing the appearance of the initial line of text in paragraphs, headings, or other elements that contain text. This pseudo-element is particularly useful when you want to add special styling to the first line, such as changing its font size, color, or adding other decorative effects.

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>::first-line Pseudo-element</title>
    <style>
      p::first-line {
        color: chocolate;
      }
    </style>
  </head>
  <body>
    <h1>::first-line Pseudo-element</h1>

    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis aliquid sint nihil eaque dolor dolorum libero, dolorem in repellendus temporibus vero recusandae explicabo tempore mollitia laborum eum assumenda possimus consequatur.</p>

    <h2>Sample Heading</h2>
    <p>Lorem ipsum dolor, <span>sit amet consectetur adipisicing elit</span>. Veritatis aliquid sint nihil eaque dolor dolorum libero, dolorem in repellendus temporibus vero recusandae explicabo tempore mollitia laborum eum assumenda possimus consequatur.</p>
  </body>
</html>

Live Preview

The CSS code you provided, p::first-line { color: chocolate; }, uses the ::first-line pseudo-element to style the first line of text within all <p> (paragraph) elements.

p::first-line: This part of the code selects the first line of text within all <p> elements on your web page. The ::first-line pseudo-element is used to target and style only the first line of text inside these paragraphs.

{ color: chocolate; }: Inside the curly braces, you define the styling properties for the selected first lines of text. In this case, you are setting the color property to chocolate, which is a named color value representing a shade of brown.