::first-line

by

The ::first-line pseudo-element in CSS is used to style the first line of text within an element. This can be helpful for creating visually distinct headlines or paragraphs.

Example

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

This code will make the first line of every paragraph on the page appear in red and bold.

You can apply various CSS properties to the ::first-line pseudo-element, such as:

  • color: Sets the color of the text.
  • font-weight: Sets the font weight (e.g., bold, normal).
  • font-style: Sets the font style (e.g., italic, normal).
  • text-decoration: Sets the text decoration (e.g., underline, line-through).
  • text-transform: Sets the text transformation (e.g., uppercase, lowercase).
  • background-color: Sets the background color of the first line.
  • margin: Sets the margin around the first line.
  • padding: Sets the padding around the first line.

Example

h1::first-line {
  color: blue;
  font-size: 1.5em;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

This code will style the first line of every <h1> element on the page with blue text, a larger font size, and a text shadow.

Note that the ::first-line pseudo-element only applies to the first line of text within an element, even if the line is broken by a word wrap. If you want to style multiple lines, you can use other CSS selectors or techniques.