CSS ::prefix Pseudo-Element

CSS ::prefix Pseudo-Element

The ::prefix pseudo-element is an experimental CSS sub-pseudo-element designed to style punctuation appearing before the first typographic letter of an element. It works with ::first-letter in the CSS specification but is not currently supported by browsers.

Syntax

The proposed syntax is:

selector::first-letter::prefix {
  property: value;
}

The selector identifies the element containing the first letter.

The ::first-letter pseudo-element represents the first typographic letter and its associated punctuation.

The ::prefix sub-pseudo-element targets punctuation appearing before that letter.

For example:

p::first-letter::prefix {
  color: #0066cc;
}

This proposed rule would color the punctuation preceding the first letter blue.

The ::prefix pseudo-element does not accept arguments.

Important: This syntax is defined in a CSS specification draft but does not produce the intended styling in current browsers.

How It Works

The ::prefix pseudo-element was proposed to provide more precise control over punctuation associated with the first letter of an element.

Normally, the ::first-letter pseudo-element can include punctuation appearing before or after the initial letter.

For example, in a paragraph beginning with a quotation mark, the opening quotation mark may be included in the first-letter selection.

Using ::first-letter alone generally applies the same styling to the initial letter and its associated punctuation.

The proposed ::prefix sub-pseudo-element would allow the preceding punctuation to receive different styling.

It does not insert new characters or modify the text content.

Instead, it represents punctuation already present in the document.

The related ::suffix sub-pseudo-element is intended to style punctuation following the first letter.

Both sub-pseudo-elements remain experimental and unavailable for production use.

Relationship to ::first-letter

The ::first-letter pseudo-element is widely supported and can style the first typographic letter of an eligible element.

For example:

p::first-letter {
  color: #0066cc;
  font-size: 32px;
  font-weight: bold;
}

This rule changes the appearance of the first letter and any punctuation included in its selection.

Consider the following HTML:

<p>"CSS makes webpages easier to style."</p>

The opening quotation mark is associated with the first letter, C.

The proposed ::prefix sub-pseudo-element would allow the quotation mark to be styled separately from the letter.

p::first-letter {
  color: #333;
  font-size: 32px;
}
p::first-letter::prefix {
  color: #0066cc;
}

The intended result would display the quotation mark in blue and the letter in dark gray.

Because ::prefix is unsupported, this code is illustrative rather than a working browser example.

Preceding Punctuation

The CSS specification defines first-letter text using typographic characters and associated punctuation.

Preceding punctuation can include quotation marks, opening parentheses, and other Unicode punctuation characters.

For example:

<p>"CSS is a stylesheet language."</p>
<p>(CSS) controls presentation.</p>
<p>'HTML' defines document structure.</p>

Each paragraph begins with punctuation before its first letter.

Under the proposed model, ::first-letter::prefix would represent the preceding punctuation associated with that letter.

Not every character before the first letter qualifies as punctuation.

The specification uses Unicode character categories to determine which characters belong to the first-letter selection.

Some intervening spaces can also be included when they occur between preceding punctuation and the initial letter.

The exact selection follows the specification's first-letter text rules rather than simply selecting every character before the first alphabetic character.

Proposed Example

The following example demonstrates the intended behavior of ::prefix.

HTML:

<p class="prefix-proposal">"CSS makes webpages easier to style."</p>

CSS:

.prefix-proposal::first-letter {
  color: #333;
  font-size: 32px;
  font-weight: bold;
}
.prefix-proposal::first-letter::prefix {
  color: #0066cc;
}

If the proposed feature were supported, the opening quotation mark would appear blue while the initial letter would remain dark.

The remainder of the paragraph would retain its normal text styling.

However, browsers do not currently implement the ::prefix sub-pseudo-element.

The example illustrates the specification's intended behavior and should not be used as a production styling technique.

Working Alternative

To style punctuation separately from the first letter today, wrap the punctuation and letter in HTML <span> elements.

This provides independent styling without relying on unsupported CSS features.

HTML:

<p class="prefix-example"><span class="prefix-punctuation">"</span><span class="prefix-initial">C</span>SS makes webpages easier to style."</p>

CSS:

.prefix-example .prefix-punctuation {
  color: #0066cc;
  font-size: 32px;
  font-weight: bold;
}
.prefix-example .prefix-initial {
  color: #333;
  font-size: 32px;
  font-weight: bold;
}

The opening quotation mark appears blue while the initial letter appears dark gray.

The remaining text uses its normal styling.

Because the punctuation and letter are separate HTML elements, they can receive different CSS declarations.

This technique works in modern browsers and preserves the punctuation in the document content.

::prefix vs. ::suffix

The proposed ::prefix and ::suffix sub-pseudo-elements represent punctuation on opposite sides of the first letter.

For example, consider a paragraph beginning with a quoted initial:

<p>"A" is the first letter.</p>

Under the proposed model, the opening quotation mark belongs to the prefix, the letter A is the initial letter, and the closing quotation mark belongs to the suffix.

The following CSS illustrates the proposed distinction:

p::first-letter::prefix {
  color: #0066cc;
}
p::first-letter::suffix {
  color: #cc3300;
}

The intended result would display the opening quotation mark in blue and the closing quotation mark in orange-red.

Neither sub-pseudo-element is currently supported by browsers.

The ::suffix name replaces the older proposed ::postfix name.

For more information, see the CSS ::suffix Pseudo-Element reference.

::prefix vs. ::before

The proposed ::prefix and supported ::before pseudo-elements have different purposes.

::prefix

The ::prefix sub-pseudo-element would identify punctuation already present before the first letter.

p::first-letter::prefix {
  color: #0066cc;
}

This selector is experimental and unsupported.

::before

The ::before pseudo-element generates content before an element's existing content.

.example::before {
  content: "\201C";
  color: #0066cc;
}

This rule generates an opening quotation mark before the element's content.

Unlike ::prefix, ::before does not identify punctuation already present in the text.

Use ::before for decorative generated content and HTML markup when existing punctuation needs independent styling.

Supported CSS Properties

The proposed ::prefix sub-pseudo-element follows the styling rules defined for ::first-letter.

The specification includes properties for text appearance, backgrounds, borders, and inline formatting.

For example, the following proposed CSS would change the punctuation's color, size, and weight:

p::first-letter::prefix {
  color: #0066cc;
  font-size: 32px;
  font-weight: bold;
}

These properties are described by the specification, but browsers do not currently provide a working ::prefix implementation.

Limitations

The ::prefix pseudo-element has several important limitations.

• It is not implemented in mainstream browsers.
• It is defined as a sub-pseudo-element of ::first-letter, not a general-purpose selector.
• It represents punctuation associated with the beginning of the first-letter text.
• It does not select arbitrary words or characters at the beginning of an element.
• It does not generate new content.
• It has no effect when there is no qualifying preceding punctuation.
• Its specification remains experimental and may change.

The feature is identified as at-risk in the CSS Pseudo-Elements Level 4 specification.

For production websites, use supported CSS selectors and HTML markup.

Accessibility Considerations

Styling punctuation should not interfere with the readability or meaning of text.

When using supported alternatives, follow these practices:

• Keep meaningful punctuation in the HTML content.
• Maintain sufficient contrast between punctuation and its background.
• Avoid oversized punctuation that overlaps surrounding characters.
• Ensure decorative typography remains readable at different zoom levels.
• Do not rely on punctuation color alone to communicate essential information.
• Preserve the document's logical reading order.

Wrapping punctuation in an HTML <span> allows it to be styled without removing the character from the document.

Use CSS generated content only for decorative characters that are not essential to understanding the text.

Browser Support

The ::prefix sub-pseudo-element is not supported by Chrome, Edge, Firefox, Safari, or other mainstream browsers.

It remains an experimental feature in the CSS Pseudo-Elements Level 4 specification.

Unsupported selectors do not apply their declarations.

The ::first-letter pseudo-element is widely supported and can style the initial letter together with its associated punctuation.

For independent punctuation styling, use ordinary HTML elements such as <span>.

For current compatibility information, visit Can I Use? and search for ::first-letter or CSS pseudo-elements.

Specifications

The ::prefix sub-pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 .

The specification describes how ::first-letter includes associated punctuation and how ::prefix and ::suffix would allow that punctuation to be styled independently.

Both sub-pseudo-elements are marked as at-risk features in the current draft.

Their syntax and behavior may change before the specification is finalized.