CSS ::first-line

The ::first-line pseudo-element in CSS is used to apply styles to the first line of a block container, such as a <p> or <div>. This can be particularly useful for emphasizing the first line of a paragraph or section of text.

Basic Syntax

The syntax for using ::first-line is straightforward:

selector::first-line {
    property: value;
}

Here, the selector can be any block-level element, and the property: value; pair defines the style to be applied.

Example

Let’s take a look at a complete example using fictional data to illustrate how the ::first-line pseudo-element works.

Result:

Once upon a time in a land far away, there lived a wise old owl.

<style>
    .first-line-example::first-line {
        font-weight: bold;
        color: darkgreen;
        font-size: 1.5em;
    }
</style>

<p class="first-line-example">Once upon a time in a land far away, there lived a wise old owl.</p>

Explanation

In the example above:

The <p> tag is styled with a class called first-line-example.
Inside the <style> tag, we target the ::first-line pseudo-element.
We apply three CSS properties: font-weight: bold;, color: darkgreen;, and font-size: 1.5em;.

Additional Notes

Only a limited set of CSS properties can be applied to the ::first-line pseudo-element. These include:

font properties
color
background
visibility
and a few others.

Experiment with different properties and values to see how it impacts the first line of your text.

This tutorial introduction to CSS's `::first-line` pseudo-element yields a structured explanation with a complete example, showcasing both the code and the resulting output.