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.

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

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.

<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>

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.

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.

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

<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:

• writing-mode
• direction
• text-orientation

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.)

<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>

<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>

<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>

<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

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.

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.

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 first formatted line, if it is not preceded by any other in-flow content (such as images or inline tables) on its line.

For this purpose, any marker boxes are ignored, as if they were out-of-flow. However, if an element has in-flow ::before or ::after content, the first-letter text is selected from the content of the element including that generated content.

If no qualifying text exists, then there is no first-letter text and no ::first-letter pseudo-element.

Note: When the first formatted line is empty, ::first-letter will not match anything. For example, in this HTML fragment: <p><br>First... the first line doesn’t contain any letters, so ::first-letter doesn’t match anything. In particular, it does not match the “F” of “First”, which is on the second line.

Note: As with ::first-line, the first-letter text of a block container that does not participate in a block formatting context cannot be the first-letter text of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first letter of the DIV is not the letter “H”. In fact, the DIV doesn’t have a first letter.

Any portion of the first-letter text that is wrapped to the next line no longer forms part of the ::first-letter pseudo-element.

2.2.3. Inheritance and Box Tree Structure of the First-Letter Pseudo-elements

The ::first-letter pseudo-element is wrapped immediately around the first-letter text it represents, even if that text is in a descendant. When a first-letter text is represented by multiple ::first-letter pseudo-elements, they are nested in the same order as their originating elements. Inheritance behaves accordingly.

<div>
  <p><span>The first few words</span>
  and the rest of the paragraph.
</div>

<div>
  <p><span><div::first-letter><p::first-letter>T</…></…>he first few words</span>
  and the rest of the paragraph.
</div>

If any ::first-letter::prefix or ::first-letter::suffix pseudo-elements exist, they are nested within the innermost ::first-letter, and otherwise interpreted similar to ::first-letter itself.

<div>
  <p><span>“The first few words</span>
  and the rest of the quotation.
</div>

<div>
  <p><span><div::first-letter><p::first-letter><div::first-letter::prefix><p::first-letter::prefix>“</…></…>T</…></…>he first few words</span>
  and the rest of the paragraph.
</div>

If the characters that would form the first-letter text are not all in the same element (as the ‘T in <p>‘<em>T...), the user agent may create the ::first-letter pseudo-element (and its ::prefix or ::suffix sub-elements, if any) from one of the elements, or all elements, or simply not create the pseudo-element(s). Additionally, if the first-letter text is not at the start of the line (for example due to bidirectional reordering, or due to a list item marker with list-style-position: inside), then the user agent is not required to create the pseudo-element(s).

A ::first-letter pseudo-element is contained within any ::first-line pseudo-elements, and thus inherits (potentially indirectly) from ::first-line, the same as any inline box on the same line.

2.2.4. Styling the First-Letter Pseudo-elements

In CSS a ::first-letter pseudo-element (and its ::prefix and ::suffix sub-elements) is similar to an inline box. The following properties apply to ::first-letter, ::first-letter::prefix, and ::first-letter::suffix pseudo-elements:

• all font properties (see [CSS-FONTS-4])
• the color and opacity properties (see [CSS-COLOR-4])
• all background properties (see [CSS-BACKGROUNDS-4])
• any typesetting properties that apply to inline elements (see [CSS-TEXT-4])
• all text decoration properties (see [CSS-TEXT-DECOR-4])
• any inline layout properties that apply to inline elements (see [CSS-INLINE-3])
• margin and padding properties (see [CSS22])
• border properties and box-shadow (see [CSS-BACKGROUNDS-4])
• any other properties defined to apply to ::first-letter by their respective specifications

User agents may apply other properties as well. However, in no case may the application of such unlisted properties to ::first-letter change what first-letter text is represented by that ::first-letter.

Note: In previous levels of CSS, user agents were allowed to choose a line height, width, and height based on the shape of the letter, to approximate font sizes; and to take the glyph outline into account when performing layout. The possibility of such loosely-defined magic has been intentionally removed, as it proved to be a poor solution for the intended use case (drop caps and raised caps), yet caused interoperability problems. See initial-letter in [CSS-INLINE-3] for explicitly handling drop caps and raised caps.

3. Highlight Pseudo-elements

3.1. Selecting Highlighted Content: the ::selection, ::search-text, ::target-text,