CSS ::postfix Pseudo-Element

CSS ::postfix Pseudo-Element

The ::postfix pseudo-element was proposed to style punctuation following the first letter selected by ::first-letter. It has since been renamed ::suffix in the CSS Pseudo-Elements specification and is not supported by current browsers.

Syntax

The older proposed syntax was:

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

The selector identifies the element containing the first letter.

The ::first-letter pseudo-element selects the first typographic letter, including associated punctuation.

The proposed ::postfix sub-pseudo-element identifies punctuation following that first letter.

For example:

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

This illustrates the older proposal, not working browser syntax.

The current draft uses ::suffix instead:

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

Neither form is currently supported for practical webpage styling.

How It Works

The ::postfix proposal was intended to provide more precise styling of punctuation associated with the first letter of an element.

The proposed behavior involves three parts:

1. The ::first-letter pseudo-element identifies the first typographic letter and associated punctuation.
2. The ::prefix sub-pseudo-element represents punctuation before that letter.
3. The formerly named ::postfix sub-pseudo-element represents punctuation after that letter.

This distinction would allow punctuation and the letter itself to receive different styles.

For example, a decorative opening letter could have one color while its following punctuation uses another.

The proposal does not insert punctuation or generate additional text.

It identifies punctuation already present in the element's content.

Important: The current specification uses the name ::suffix instead of ::postfix. Browser implementations of this feature are not available.

Relationship to ::first-letter

The ::first-letter pseudo-element styles the first typographic letter of an eligible element.

For example:

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

This selector is supported by modern browsers.

Depending on the text, the first-letter selection can include punctuation associated with the first letter.

Consider this paragraph:

<p>A. CSS provides styling rules.</p>

The first-letter selection can include the letter A and its following period.

With ::first-letter, the selected characters generally receive the same styling.

The proposed ::postfix sub-pseudo-element was designed to provide separate control over the following punctuation.

Under the newer draft, this role belongs to ::suffix.

First-Letter Punctuation

The first-letter selection can include certain punctuation characters immediately before or after the first letter.

Examples include quotation marks and periods associated with an initial character.

Consider the following text:

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

The opening quotation mark is associated with the beginning of the first-letter selection.

The closing quotation mark may also be included as following punctuation under the first-letter selection rules.

The specification distinguishes punctuation before and after the first letter using proposed sub-pseudo-elements.

Only ::first-letter has established browser support among these selectors.

Proposed Example

The following code demonstrates the intended purpose of the older ::postfix proposal.

HTML:

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

CSS:

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

The intended result would style the initial letter and its following period separately.

However, browsers do not implement ::postfix, so the second rule does not produce that result.

The newer ::suffix name is also not available for production use.

This example is provided to explain the proposal rather than demonstrate a functioning feature.

Working Alternative

When punctuation needs independent styling, use an HTML <span> element to identify it directly.

This method works in modern browsers without relying on experimental pseudo-elements.

HTML:

<p class="postfix-example"><span class="initial">A</span><span class="punctuation">.</span> CSS makes webpages easier to style.</p>

CSS:

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

The letter A appears dark, while the period appears blue.

Each character is styled independently using an ordinary class selector.

This example demonstrates the intended visual effect without requiring ::postfix.

For existing punctuation that needs individual styling, explicit HTML markup is the reliable approach.

::postfix vs. ::after

The proposed ::postfix and supported ::after pseudo-elements serve different purposes.

::postfix

The older ::postfix proposal targeted punctuation already present after the first typographic letter.

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

This syntax is not supported by browsers and has been renamed in the specification.

::after

The ::after pseudo-element creates generated content after an element's existing content.

.example::after {
  content: ".";
  color: #0066cc;
}

This rule generates a period at the end of the selected element.

Unlike the proposed ::postfix, ::after does not identify punctuation associated with the first letter.

It creates content at the end of its originating element.

Use ::after for decorative generated content and explicit HTML markup when existing punctuation needs separate styling.

Limitations

The ::postfix pseudo-element has significant limitations.

• It is not implemented in current browsers.
• The name has been replaced by ::suffix in the current specification draft.
• It was proposed specifically for punctuation associated with ::first-letter.
• It does not represent arbitrary text at the end of an element.
• It does not generate new content.
• Its proposed styling behavior should not be relied upon in production websites.
• The replacement ::suffix feature is also not supported by browsers.

For reliable results, use supported CSS pseudo-elements or ordinary HTML elements.

The ::first-letter pseudo-element can style the initial letter and associated punctuation together.

A <span> element provides separate control over individual punctuation characters.

Accessibility Considerations

The proposed ::postfix pseudo-element was intended to change visual styling rather than the meaning of text.

When using supported alternatives, follow these accessibility practices:

• Keep meaningful punctuation in the HTML content.
• Use decorative CSS generated content only when the information is not essential.
• Maintain sufficient contrast between styled punctuation and its background.
• Ensure enlarged initial letters do not overlap surrounding text.
• Test decorative typography at different screen sizes and zoom levels.
• Preserve a logical reading order for assistive technologies.

Using a <span> to style punctuation preserves the characters in the document.

Do not remove meaningful punctuation from the HTML solely to reproduce it with CSS.

Browser Support

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

The current specification draft has renamed it ::suffix, which also lacks browser support.

Unsupported pseudo-element selectors do not apply their declarations.

The ::first-letter, ::before, and ::after pseudo-elements are widely supported alternatives, although they do not provide identical functionality.

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

Specifications

The ::postfix sub-pseudo-element appeared in earlier drafts of the CSS Pseudo-Elements Module Level 4 .

In the October 2026 editor's draft, the feature was renamed ::suffix.

The current specification describes ::first-letter and its proposed ::prefix and ::suffix sub-pseudo-elements.

These sub-pseudo-elements remain experimental and are identified as at-risk features in the specification.

The older ::postfix name is retained here for reference to the original proposal.