CSS Pseudo-Elements Module Level 4

1. Introduction

This section is informative.

Pseudo-elements represent abstract elements of the document beyond those elements explicitly created by the document language. Since they are not restricted to fitting into the document tree, they can be used to select and style portions of the document that do not necessarily map to the document’s tree structure. For instance, the ::first-line pseudo-element can select content on the first formatted line of an element after text wrapping, allowing just that line to be styled differently from the rest of the paragraph.

Each pseudo-element is associated with an originating element and has syntax of the form ::name-of-pseudo. This module defines the pseudo-elements that exist in CSS and how they can be styled. For more information on pseudo-elements in general, and on their syntax and interaction with other selectors, see [SELECTORS-4].

Note: As a reminder, pseudo-elements cannot be chained together unless explicitly allowed. For example, ::marker::before is not allowed; but ::before::marker is.

Note: Level 4 is the first version of the CSS Pseudo specification under this name. It was branched from the Selectors 3 [SELECTORS-3] specification, and thus started at level 4, with the remainder of Selectors 3 becoming Selectors 4 [SELECTORS-4].

2. Typographic Pseudo-elements

2.1. First-Line Text: the ::first-line pseudo-element

The ::first-line pseudo-element represents the contents of the first formatted line of its originating element.

Tests

The rule below means “change the letters of the first line of every p element to uppercase”:

p::first-line { text-transform: uppercase }

The selector p::first-line does not match any real document element. It instead matches a pseudo-element that the user agent will automatically insert at the beginning of every p element.

Note: Note that the length of the first line depends on a number of factors, including the width of the page, the font size, etc.

For example, given an ordinary HTML [HTML5] paragraph such as:

<P>This is a somewhat long HTML paragraph
that will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</P>

Depending on the width of the element, its lines might be broken as follows:

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be styled by the ‘::first-line’
pseudo-element. The other lines will be
treated as ordinary lines in the paragraph.

or alternately as follows:

THIS IS A SOMEWHAT LONG
HTML paragraph that will
be broken into several
lines. The first line will
be styled by the
‘::first-line’ pseudo-
element. The other lines
will be treated as ordinary
lines in the paragraph.

2.1.1. Finding the First Formatted Line

In CSS, the ::first-line pseudo-element can only have an effect when attached to a block container:

The first formatted line of a block container that establishes an inline formatting context represents the inline-level content of its first line box.
The first formatted line of a block container or multi-column container that contains block-level content (and is not a table wrapper box) is the first formatted line of its first in-flow block-level child. If no such line exists, it has no first formatted line.

Note: The first formatted line can be an empty line. For example, the first line of the p in <p><br>First… doesn’t contain any letters. Thus the word “First” is not on the first formatted line, and will not be affected by p::first-line.

Note: The first line of a block container that does not itself participate in a block formatting context cannot be the first formatted line of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first formatted line of the DIV is not the line “Hello”, but rather the line that contains that entire inline block.

When a first formatted line is represented by multiple ::first-line pseudo-elements, they are nested in the same order as their originating elements. The inline-level contents of this line—including its root inline box fragment—are nested within the innermost ::first-line pseudo-element.

Consider the following markup:

<DIV>
  <P>First paragraph</P>
  <P>Second paragraph</P>
</DIV>

If we assume a fictional tag sequence to represent the elements’ ::first-line pseudo-elements, it would be something like:

<DIV>
  <P><DIV::first-line><P::first-line>First paragraph</P::first-line></DIV::first-line></P>
  <P><P::first-line>Second paragraph</P::first-line></P>
</DIV>

2.1.2. Styling the ::first-line Pseudo-element

The ::first-line pseudo-element’s generated box behaves similar to that of an inline-level box, but with certain restrictions. The following CSS properties apply to a ::first-line pseudo-element:

all font properties (see [CSS-FONTS-4])
the color and opacity properties (see [CSS-COLOR-4])
all background properties (see [CSS-BACKGROUNDS-3])
any typesetting properties that apply to inline elements (see [CSS-TEXT-4])
all text decoration properties (see [CSS-TEXT-DECOR-4])
the ruby-position property (see [CSS-RUBY-1])
any inline layout properties that apply to inline elements (see [CSS-INLINE-3])
any other properties defined to apply to ::first-line by their respective specifications

User agents may apply other properties as well except for the following excluded properties:

Note: Setting line-height on ::first-line inherits to the fragment of the root inline box that wraps the contents of the first line, and therefore can both increase and decrease the height of the first line box.

2.1.3. Inheritance and the ::first-line Pseudo-element

During CSS inheritance, the fragment of a child that occurs on the first line inherits any standard inherited properties—except the properties excluded above—from the ::first-line pseudo-element. For all other properties, including all custom properties [CSS-VARIABLES-1], inheritance is from the non-pseudo parent. (The portion of a child element that does not occur on the first line always inherits from the non-pseudo parent.)

In the common case (of standard inherited CSS properties), inheritance into and from a ::first-line pseudo-element can be understood by writing out a fictional tag sequence to represent ::first-line. Consider the earlier example; in case of the first rendering, the fictional tag sequence would be:

<P><p::first-line>This is a somewhat long HTML paragraph
that</p::first-line> will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

And in the case of the second rendering:

<p><p::first-line>This is a somewhat long</p::first-line> HTML paragraph
that will be broken into several lines.
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

If a pseudo-element breaks up a real element, the effect can often be described by a fictional tag sequence that closes and then re-opens the element. Suppose we mark up the earlier example with a span element encompassing the first sentence:

<p><span>This is a somewhat long HTML paragraph
that will be broken into several lines.</span>
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

The effect of the first rendering would be similar to the following fictional tag sequence:

<p><p::first-line><span>This is a somewhat long HTML paragraph
that</span></p::first-line><span> will be broken into several lines.</span>
The first line will be styled
by the ‘::first-line’ pseudo-element.
The other lines will be treated
as ordinary lines in the paragraph.</p>

2.2. First-Letter Text: ::first-letter pseudo-element and its ::prefix and ::suffix children

Tests

A drop-cap initial letter, including the opening quotation mark before it.

The ::first-letter pseudo-element represents the first Letter, Number, or Symbol (Unicode category L*, N*, or S*) typographic character unit on the first formatted line of its originating element (the first letter) as well as its associated punctuation. Collectively, this text is the first-letter text. The ::first-letter pseudo-element can be used to create “initial caps” and “drop caps”, which are common typographic effects.

For example, the following rule creates a 2-line drop-letter on every paragraph following a level-2 header, using the initial-letter property defined in [CSS-INLINE-3]:

h2 + p::first-letter { initial-letter: 3; }

Note: The first letter may in fact be a digit, e.g., the “6” in “67 million dollars is a lot of money.”

To allow independent styling of the first letter itself and its adjacent punctuation, associated preceding punctuation is represented by the ::prefix sub-pseudo-element of the ::first-letter pseudo-element (::first-letter::prefix); and associated following punctuation is represented by the ::suffix sub-pseudo-element of the ::first-letter pseudo-element (::first-letter::suffix). See § 2.2.1 First Letters and Associated Punctuation, below.

2.2.1. First Letters and Associated Punctuation

As explained in CSS Text 3 § 1.4 Characters and Letters, a typographic character unit can include more than one Unicode codepoint. For example, combining characters must be kept with their base character. Also, languages may have additional rules about how to treat certain letter combinations. In Dutch, for example, if the letter combination "ij" appears at the beginning of an element, both letters should be considered within the ::first-letter pseudo-element. [UAX29] When selecting the first letter, the UA should tailor its definition of typographic character unit to reflect the first-letter traditions of the ::first-letter pseudo-element’s containing block’s content language.

Preceding and following punctuation must also be included as part of the first-letter text in the ::first-letter pseudo-element as follows:

All punctuation—i.e, characters that belong to the Punctuation (P*) Unicode general category [UAX44]—that precedes the first letter, as well as any intervening typographic space—characters belonging to the Zs Unicode general category [UAX44] other than U+3000 IDEOGRAPHIC SPACE.
Any punctuation other than opening punctuation and dashes—i.e. characters that belong to the Punctuation (P*) Unicode general category, excluding Open Punctuation (Ps) and Dash Punctuation (Pd)—that follows the first letter, as well as any intervening typographic space—characters belonging to the Zs Unicode general category [UAX44] other than U+3000 IDEOGRAPHIC SPACE or a word separator.

Informally, the first-letter text’s pattern here can be roughly (ignoring the exclusions from Zs) represented as a “regular expression”


    
P (Zs|P)*)? (L|N|S) ((Zs|P−(Ps|Pd))* (P−(Ps|Pd))?

—or, alternatively,


    
[P] [Zs P]*)? [L N S] ([Zs [P--[Ps Pd]]]* [P--[Ps Pd]])?

—where the Unicode category abbreviation represents the set of all typographic character units belonging to that category.

See CSS Text 3 § 1.4 Characters and Letters and CSS Text 3 § E Characters and Properties for more information on typographic character units and their Unicode properties. [CSS-TEXT-3]

2.2.2. Finding the First-Letter Text

As with ::first-line, the ::first-letter pseudo-element can only have an effect when attached to a block container. Its first-letter text is the first such inline-level content participating in the inline formatting context of its originating element’s