CSS ::first-line Pseudo Element

CSS `::first-line` Pseudo-Element

The ::first-line pseudo-element is used to apply styles to only the first line of a block-level element, such as a paragraph or heading. The exact length of the first line depends on the container’s width, font size, and content flow.

1. Syntax

selector::first-line {
  /* CSS styles here */
}

Example:

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

✅ The first line of each <p> will be bold and blue.

2. Example – Styling the First Line of a Paragraph

<p>This is an example of using the first-line pseudo-element. The first line of this paragraph will be styled differently.</p>

p::first-line {
  font-size: 1.5em;
  color: darkred;
  text-transform: uppercase;
}

✅ The first line of the paragraph will be larger, dark red, and uppercase.

3. Styling Properties that Work with `::first-line`

🔹 Allowed Properties

color
font-size
font-weight
font-style
font-variant
letter-spacing
word-spacing
text-decoration
text-transform
line-height

❌ Not Allowed Properties

margin
padding
border
box-shadow
background
float
width/height

4. Example – Emphasizing the First Line

<p>CSS allows you to create amazing text effects. The first line of this paragraph will stand out using special styles.</p>

p::first-line {
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

✅ The first line will be bigger, bold, and spaced out.

5. Combining `::first-line` with `::first-letter`

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

p::first-letter {
  font-size: 3em;
  color: red;
  font-weight: bold;
}

✅ The first line gets bold and navy, while the first letter is enlarged and red.

6. Browser Support

✅ Fully supported in Chrome, Edge, Firefox, Safari, and Opera.

7. Best Practices

✔ Use ::first-line for headlining effects in paragraphs.
✔ Combine with ::first-letter for better typography control.
✔ Remember that the length of the first line depends on screen size.

Souy Soeng

CSS ::first-line Pseudo Element