Tutorials


CSS ::first-line property


The ::first-line pseudo-element in CSS is used to apply styles to the first line of a block-level element's content. This pseudo-element allows you to target and style the initial line of text within an element, which can be useful for creating distinctive designs or emphasizing the beginning of a paragraph or block of text.

Syntax

selector::first-line {
  /* styles */
}
  • selector: The element to which you want to apply the styling.
  • ::first-line: The pseudo-element that targets the first line of the element's content.

How It Works

  1. Basic Usage:

    • The ::first-line pseudo-element applies styles to the first line of text within a block-level element. The styles you set will only affect this first line.
    p::first-line {
  font-weight: bold;
  color: blue;
}
    • In this example, the first line of every <p> element will be bold and blue.

  2. Style Properties:

    • Not all CSS properties can be applied to ::first-line. The properties that are typically supported include:

      • color
      • font-family
      • font-size
      • font-style
      • font-variant
      • font-weight
      • letter-spacing
      • line-height
      • text-align
      • text-transform
      • text-decoration
    h1::first-line {
  font-size: 2em;
  text-transform: uppercase;
}
    • In this example, the first line of every <h1> element will have a font size of 2em and all text will be transformed to uppercase.

  3. Block-Level Elements:

    • ::first-line works with block-level elements like paragraphs (<p>), headers (<h1>, <h2>, etc.), and other block containers.
    blockquote::first-line {
  font-style: italic;
  border-left: 3px solid gray;
  padding-left: 10px;
}
    • This example applies italic styling and a left border with padding to the first line of a <blockquote> element.

Examples

HTML

<!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 Example</title>
  <style>
    p::first-line {
      font-weight: bold;
      color: blue;
      font-size: 1.2em;
    }

    h1::first-line {
      font-size: 2em;
      text-transform: uppercase;
    }

    blockquote::first-line {
      font-style: italic;
      border-left: 3px solid gray;
      padding-left: 10px;
    }
  </style>
</head>
<body>
  <p>This is a paragraph where the first line will be styled differently than the rest of the text. The styles applied here are bold and blue with a slightly larger font size.</p>

  <h1>This is a heading</h1>

  <blockquote>
    This is a blockquote. The first line of this blockquote will have a left border and italicized text.
  </blockquote>
</body>
</html>

Explanation:

  • p::first-line:

    • Applies bold text, blue color, and a larger font size to the first line of every <p> element.

  • h1::first-line:

    • Increases the font size and transforms the text to uppercase for the first line of every <h1> element.

  • blockquote::first-line:

    • Adds an italic style, a left border, and padding to the first line of every <blockquote> element.

Important Points

  1. Element Context:

    • The ::first-line pseudo-element only affects the first line of text. If the text wraps to a new line (due to resizing or other reasons), the pseudo-element will continue to target the actual first line of the content.

  2. Limited Property Support:

    • Not all CSS properties can be applied to ::first-line. It’s essential to use properties that are supported for the pseudo-element to ensure proper rendering.

  3. Block-Level Elements Only:

    • The ::first-line pseudo-element only applies to block-level elements and is not effective with inline elements or pseudo-elements.

  4. Content Overflow:

    • If the first line is shorter due to content overflow, the styles may not be as apparent or may be adjusted according to the layout.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about