::first-line CSS Pseudo Element

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS ::first-line pseudo-element is used to style the first line of text within a block-level element. It allows you to apply specific styles, such as font properties, color, and text decorations, exclusively to the first line of text within an element. This can be particularly useful for creating typographic effects or emphasizing the beginning of a paragraph or block of text without the need for additional HTML markup.

Here's a basic example of how to use ::first-line in CSS:

p::first-line {

  font-weight: bold;

  color: blue;

  text-decoration: underline;

}

In this example, the first line of text within any <p> (paragraph) element will be displayed in bold blue text with an underline. The ::first-line pseudo-element is a handy tool for enhancing the visual appeal and readability of your web content.

Syntax

element::first-line { … }

Example

HTML

<p>Lorem ipsum dolor sit amet<br>consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.,</p>

<p>Duis aute irure dolor in reprehenderit in<br> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

p::first-line { 

   border: 1px solid red;

   background: #000;

   color: red;

   font-weight: bold; 

}

Result

Editor

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.