::first-line CSS Pseudo Element

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The ::first-line pseudo-element in CSS is used to target and style the first line of text within a block-level element. Unlike typical selectors that target entire elements, ::first-line allows designers to apply unique styling specifically to the opening line, which can help emphasize or differentiate it from the rest of the content. This pseudo-element is particularly useful in typographic design, for instance, to create drop caps, introductory highlights, or simply to give a more polished look to paragraphs.

When using ::first-line, it’s important to remember that it only applies to block-level elements such as p, div, and blockquote. Inline elements cannot be targeted with this pseudo-element because the concept of a "line" is defined by the block container. Moreover, the pseudo-element is dynamically affected by the width of the container and other layout changes, meaning that the first line can vary in length depending on the viewport, font, or other styling applied.

Not all CSS properties can be applied to ::first-line. Typically, it supports typographic and text-related properties such as font, color, letter-spacing, word-spacing, text-transform, and text-decoration. Properties related to box model layout, such as margin, padding, or border, are ignored when applied to ::first-line.

Here’s a simple example demonstrating its usage:

<p>This is an example paragraph. The first line of this paragraph will appear differently from the rest of the text.</p>

p::first-line {
    font-weight: bold;
    color: darkblue;
    text-transform: uppercase;
}

In this example, only the very first line of the paragraph will be bold, dark blue, and uppercase, while the remaining lines maintain the default styling of the p element. This capability makes ::first-line a powerful tool for subtle typographic enhancements in web design.

Syntax

element::first-line { … }

Example

HTML

<p class="intro-text">

  This is a demonstration of the first-line pseudo-element. As you resize 

  this window, you will notice that only the text appearing on the very 

  first line receives the special styling. This is a classic typographic 

  technique used in newspapers and magazines to draw the reader's eye 

  into the beginning of an article.

</p>

CSS

/* Target the first line of the paragraph with the class .intro-text */

.intro-text::first-line {

  font-weight: bold;

  font-variant: small-caps;

  color: #2c3e50;

  font-size: 1.2em;

  background-color: #fcf3cf;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS ::first-line pseudo element. Hover over a browser icon to see the version that first introduced support for this CSS psuedo element.