CSS ::first-line - Style First Line of a Paragraph

The CSS ::first-line pseudo-element is used when we need to style the first line of an element like P (the paragraph). For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p::first-line {color: yellowgreen; font-weight: bold;}
   </style>
</head>
<body>

   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
   Neque quam delectus corporis ipsum, itaque sunt suscipit blanditiis,
   dolorum ratione natus dignissimos odio culpa in recusandae magni
   eum voluptates! Atque commodi excepturi repudiandae a ab possimus
   nobis ratione praesentium in neque.</p>
   
</body>
</html>

Output

Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque quam delectus corporis ipsum, itaque sunt suscipit blanditiis, dolorum ratione natus dignissimos odio culpa in recusandae magni eum voluptates! Atque commodi excepturi repudiandae a ab possimus nobis ratione praesentium in neque.

In above example, using the following CSS code:

p::first-line {color: yellowgreen; font-weight: bold;}

the following style:

color: yellowgreen; font-weight: bold;

is applied to the first line of every paragraphs. To style the first line of specified or particular paragraph, then assign an ID or a CLASS to the paragraph to select and use the required one, as shown in the example given below.

Style First Line of Particular Paragraph using CSS

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p#one::first-line {color: yellowgreen; font-weight: bold;}
   </style>
</head>
<body>

   <p id="one">Lorem ipsum dolor sit amet consectetur adipisicing
   elit. Neque quam delectus corporis ipsum, itaque sunt suscipit blanditiis,
   dolorum ratione natus dignissimos odio culpa in recusandae magni eum
   voluptates! Atque commodi excepturi repudiandae a ab possimus nobis
   ratione praesentium in neque.</p>
   <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
   Voluptatibus aspernatur obcaecati, ea veritatis vitae repellendus
   architecto?</p>
   <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
   Laudantium, eius.</p>
   
</body>
</html>

Output

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus aspernatur obcaecati, ea veritatis vitae repellendus architecto?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laudantium, eius.

List of Properties that can be applied to ::first-line

CSS Online Test

« Previous Tutorial Next Tutorial »