CSS ::suffix Pseudo-Element

CSS ::suffix Pseudo-Element

The ::suffix pseudo-element is an experimental CSS sub-pseudo-element that represents punctuation following the first typographic letter of an element. It is designed to work with ::first-letter, allowing the letter and its associated trailing punctuation to be styled independently.

Syntax

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

The selector identifies the element containing the initial letter and its associated punctuation.

The ::first-letter pseudo-element represents the initial typographic letter, number, or symbol.

The ::suffix sub-pseudo-element represents qualifying punctuation following that initial character.

For example:

p::first-letter::suffix {
  color: #cc0000;
}

This proposed rule would style punctuation following the first letter of a paragraph in red.

The initial letter could receive separate styling:

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

The first rule styles the initial letter.

The second rule is intended to style its associated following punctuation.

Important: The ::suffix sub-pseudo-element is not implemented in current browsers. These rules demonstrate proposed syntax rather than a working browser feature.

How It Works

The CSS Pseudo-Elements specification defines special handling for punctuation associated with an element's first letter.

For example, a paragraph may begin with a letter followed immediately by a closing quotation mark.

The initial letter and the punctuation can be treated as part of the first-letter text.

The proposed ::suffix sub-pseudo-element provides a way to style the following punctuation independently.

The intended process involves four steps:

1. The browser identifies the first typographic letter of the element.
2. It determines whether qualifying punctuation immediately follows that letter.
3. The ::first-letter pseudo-element represents the initial letter and its associated punctuation.
4. The ::suffix sub-pseudo-element allows the following punctuation to receive separate styling.

Consider the following paragraph:

<p>A) CSS is used to style webpages.</p>

The letter A is the initial character.

The closing parenthesis is punctuation immediately following the letter.

Under the proposed model, the punctuation can be represented by ::first-letter::suffix.

CSS does not create the punctuation. It only styles characters already present in the document.

Relationship to ::first-letter

The ::suffix sub-pseudo-element is defined as a child of ::first-letter.

The ::first-letter pseudo-element selects the initial typographic character and may include adjacent punctuation.

For example:

<p>A) CSS provides styling for HTML.</p>

Without separate punctuation styling, a rule such as the following can affect the initial letter and its associated punctuation:

p::first-letter {
  color: #0066cc;
  font-size: 2rem;
}

The proposed ::suffix sub-pseudo-element provides more precise control:

p::first-letter {
  color: #0066cc;
  font-size: 2rem;
}
p::first-letter::suffix {
  color: #cc0000;
  font-size: 1rem;
}

The intended result is a larger blue initial letter with smaller red trailing punctuation.

The ::suffix sub-pseudo-element does not represent the remainder of the paragraph.

It applies only to punctuation associated with the first-letter text.

Following Punctuation

The CSS specification identifies certain punctuation characters as part of the first-letter text when they occur immediately after the initial letter.

These can include closing quotation marks, closing parentheses, and other qualifying punctuation.

For example:

<p>A) CSS controls presentation.</p>
<p>B] HTML defines structure.</p>
<p>C" JavaScript adds behavior.</p>

Each paragraph begins with a letter followed by punctuation.

The ::suffix sub-pseudo-element is intended to represent qualifying following punctuation.

Not every punctuation character is included.

The specification uses Unicode character categories and specific rules to determine which characters belong to the first-letter text.

For example, a hyphen following the first letter is not automatically treated as suffix punctuation.

Whitespace or a line break can also affect which characters qualify.

The browser determines the first-letter text according to the specification rather than simply selecting every character after the initial letter.

::prefix and ::suffix

The ::prefix and ::suffix sub-pseudo-elements are designed to provide separate styling for punctuation surrounding an initial letter.

For example:

<p>"A) CSS controls presentation.</p>

The opening quotation mark appears before the letter A.

The closing parenthesis appears immediately after it.

The proposed selectors allow the three parts to receive different styling:

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

The intended result is a blue initial letter, green preceding punctuation, and red following punctuation.

Both ::prefix and ::suffix remain experimental and are not currently supported by browsers.

Proposed CSS Example

The following example demonstrates the intended syntax for styling punctuation after an initial letter.

HTML:

<p class="suffix-example">A) CSS styles webpages.</p>

CSS:

.suffix-example::first-letter {
  color: #0066cc;
  font-size: 2rem;
  font-weight: bold;
}
.suffix-example::first-letter::suffix {
  color: #cc0000;
  font-size: 1rem;
}

If implemented, the initial letter would appear larger and blue, while the following parenthesis would appear smaller and red.

The remaining text would retain its normal styling.

Note: This example is illustrative only. Current browsers do not implement ::first-letter::suffix, so the suffix rule will not produce the described result.

Working Alternative

Until ::suffix is supported, the most reliable approach is to wrap the initial letter and punctuation in separate HTML elements.

This provides direct control over their appearance using standard CSS.

HTML:

<p class="suffix-demo"><span class="initial-letter">A</span><span class="initial-suffix">)</span> CSS styles webpages.</p>

CSS:

.suffix-demo {
  font-size: 1rem;
  line-height: 1.6;
}
.suffix-demo .initial-letter {
  color: #0066cc;
  font-size: 2rem;
  font-weight: bold;
}
.suffix-demo .initial-suffix {
  color: #cc0000;
  font-size: 1.25rem;
  font-weight: bold;
}

The initial letter appears larger and blue.

The closing parenthesis appears red and uses a smaller font size.

The remaining text uses the paragraph's normal styling.

This example works in modern browsers because it uses ordinary HTML elements and CSS class selectors.

Unlike the proposed ::suffix feature, this approach requires explicitly identifying and wrapping the characters in the HTML.

::suffix vs. ::postfix

The ::suffix sub-pseudo-element was previously named ::postfix in an earlier version of the CSS Pseudo-Elements specification.

The specification was updated to use ::suffix as the current name.

Both names refer to the same proposed capability: independently styling punctuation following an initial letter.

For example, older drafts used:

p::first-letter::postfix {
  color: #cc0000;
}

The current specification uses:

p::first-letter::suffix {
  color: #cc0000;
}

Neither syntax is currently implemented in browsers.

Use ::suffix when referring to the current specification.

For historical information, see the CSS ::postfix Pseudo-Element reference.

::suffix vs. ::after

The ::suffix and ::after pseudo-elements serve different purposes.

The proposed ::suffix sub-pseudo-element targets punctuation already present after an initial letter.

The ::after pseudo-element generates content at the end of an element.

For example:

p::after {
  content: "!";
  color: #cc0000;
}

This inserts an exclamation mark after the paragraph's content.

It does not select punctuation following the paragraph's first letter.

Use ::after for generated content and the proposed ::suffix feature for styling existing first-letter punctuation.

Supported CSS Properties

The CSS specification defines ::suffix as a sub-pseudo-element of ::first-letter with similar inline styling capabilities.

The proposed feature allows properties associated with typography, backgrounds, spacing, and inline decoration.

For example:

p::first-letter::suffix {
  color: #cc0000;
  font-size: 1.25rem;
  font-weight: bold;
  background-color: #fff3f3;
}

This demonstrates how the suffix could receive its own typography and background styling.

Because the feature is not implemented, these declarations cannot currently produce the proposed result.

Limitations

The proposed ::suffix sub-pseudo-element has several important limitations.

• It is not implemented in current browsers.
• It is defined as a sub-pseudo-element of ::first-letter, not a general selector for trailing punctuation.
• It only represents qualifying punctuation associated with the first-letter text.
• It does not target punctuation elsewhere in a paragraph.
• It does not create new punctuation characters.
• Its behavior depends on the rules used to identify the first-letter text.
• It may not be generated when the browser cannot reliably determine the first-letter text across element boundaries.
• The feature is marked at-risk in the CSS specification and may change before widespread implementation.

For production websites, use ordinary HTML elements and CSS classes when separate punctuation styling is required.

Do not rely on ::suffix for essential presentation until browser support becomes available.

Accessibility Considerations

The proposed ::suffix sub-pseudo-element affects visual presentation without changing the underlying text.

When styling punctuation, consider the following accessibility practices:

• Maintain sufficient contrast between punctuation and its background.
• Avoid making punctuation so small that it becomes difficult to recognize.
• Preserve the original punctuation in the document.
• Do not rely on color alone to communicate meaning.
• Ensure enlarged initial letters do not overlap surrounding text.
• Test punctuation styling at different zoom levels.
• Use semantic HTML rather than decorative punctuation to communicate essential information.
• Verify that alternative markup remains readable when CSS is disabled.

For example, when using the working HTML alternative:

<p><span class="initial-letter">A</span><span class="initial-suffix">)</span> CSS styles webpages.</p>

The letter and punctuation remain part of the actual text content.

This preserves the characters for copying, text selection, and assistive technologies.

Browser Support

The ::suffix sub-pseudo-element is not currently supported by major browsers, including Chrome, Edge, Firefox, Safari, and Opera.

It remains a proposed feature in CSS Pseudo-Elements Level 4.

The specification marks both ::prefix and ::suffix as at-risk features, meaning their inclusion in a future finalized specification is not guaranteed.

For example, this rule does not currently provide functional styling:

p::first-letter::suffix {
  color: #cc0000;
}

Browsers that do not recognize the selector ignore the rule.

A feature query can be used to check whether the selector is recognized:

@supports selector(p::first-letter::suffix) {
  p::first-letter::suffix {
    color: #cc0000;
  }
}

This prevents the declaration from applying when the selector is unsupported, but it does not add support to the browser.

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

For implementation details, consult the CSS Pseudo-Elements specification.

Specifications

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

The specification describes ::suffix as a sub-pseudo-element of ::first-letter that represents qualifying punctuation following the initial typographic letter.

It also defines the related ::prefix sub-pseudo-element for preceding punctuation.

The earlier name ::postfix was replaced by ::suffix in the specification.

These features remain experimental and are subject to further specification changes.