CSS ::grammar-error Pseudo-Element

CSS ::grammar-error Pseudo-Element

The ::grammar-error pseudo-element represents text that a browser or its text-checking system identifies as grammatically incorrect. It is intended to allow limited customization of grammatical error indicators, such as underline colors and styles, without changing the original text.

Syntax

selector::grammar-error {
  property: value;
}

The selector identifies an element containing text that may be checked for grammatical errors.

The ::grammar-error pseudo-element represents text ranges identified as grammatical errors by the browser or its text-checking system.

For example:

textarea::grammar-error {
  text-decoration-color: #cc3300;
  text-decoration-style: wavy;
}

This rule requests a reddish-orange wavy decoration for grammatical errors detected in a textarea.

The rule does not identify grammatical errors itself.

It only requests styling for error ranges that the browser has already identified.

Important: Browser support for ::grammar-error is limited. Unsupported browsers ignore the selector.

How It Works

Some browsers and operating systems provide writing assistance that can identify possible grammatical errors in editable text.

When a grammatical error is detected, the browser may display a visual indicator beneath the affected words.

The ::grammar-error pseudo-element is designed to represent those identified text ranges.

For example, consider the following sentence:

She go to the office every day.

A grammar checker might identify "go" as incorrect because the subject and verb do not agree.

If the browser exposes that error through the pseudo-element, CSS can request a different decoration style.

::grammar-error {
  text-decoration-color: #cc3300;
  text-decoration-style: wavy;
}

The intended result is a colored wavy underline beneath the identified error.

However, the browser determines whether an error exists, which text is marked, and whether custom styling is supported.

The pseudo-element does not correct the sentence or replace the detected word.

Grammar Checking in Browsers

Grammar checking is different from ordinary CSS styling because it depends on text analysis performed outside the stylesheet.

A browser may use built-in writing assistance, operating system services, or other text-checking features.

These services can vary depending on the browser, operating system, language, and user preferences.

For example:

<label for="grammar-text">Enter a sentence:</label>
<textarea id="grammar-text" rows="4" cols="40" spellcheck="true">She go to the office every day.</textarea>

The spellcheck="true" attribute requests spelling and grammar checking where supported.

It does not guarantee that grammar checking will occur.

Some browsers may check spelling but not grammar.

Other browsers may depend on operating system settings or language-specific services.

The browser may also use its own visual indicators without allowing CSS to customize them.

Note: The spellcheck attribute is not a grammar-checking API. It provides a hint about whether text checking should be enabled.

Styling Grammar Errors

The ::grammar-error pseudo-element is intended to support a restricted set of text decoration properties.

Changing the Underline Color

::grammar-error {
  text-decoration-color: #cc3300;
}

This rule requests a reddish-orange color for grammatical error decorations.

Using a Wavy Underline

::grammar-error {
  text-decoration-style: wavy;
}

This rule requests a wavy decoration style.

Combining Decoration Properties

::grammar-error {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #cc3300;
}

These declarations request a reddish-orange wavy underline beneath detected grammatical errors.

Actual rendering depends on browser support and the browser's text-checking implementation.

The browser may preserve its own error indicators instead of applying the requested CSS.

Example

The following example uses an editable textarea containing a possible grammatical error.

HTML:

<label for="grammar-example">Check this sentence:</label>
<textarea id="grammar-example" rows="4" cols="40" spellcheck="true">She go to the office every day.</textarea>

CSS:

#grammar-example {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
#grammar-example::grammar-error {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #cc3300;
}

The textarea contains a sentence with a subject-verb agreement error.

If grammar checking is available and enabled, the browser may identify the word "go" as incorrect.

If the browser also supports ::grammar-error styling, it may apply the requested reddish-orange wavy underline.

If the pseudo-element is unsupported, the textarea remains editable and the browser may display its normal grammar indicators.

Note: No Browser Result is included because the example cannot reliably demonstrate the pseudo-element across browsers. Grammar detection and custom error styling depend on browser and operating system support.

Supported CSS Properties

The ::grammar-error pseudo-element has a restricted set of applicable CSS properties.

The CSS specification identifies the following properties for styling spelling and grammar error decorations:

The text-decoration shorthand can also be used to specify applicable decoration values.

General layout properties such as margin, padding, display, and position are not applicable to this pseudo-element.

The property restrictions help preserve the browser's text-editing and error-reporting behavior.

Note: A property being permitted by the specification does not guarantee that browsers currently implement it for ::grammar-error.

::grammar-error vs. ::spelling-error

The ::grammar-error and ::spelling-error pseudo-elements represent different categories of text errors.

::grammar-error

The ::grammar-error pseudo-element represents text identified as grammatically incorrect.

::grammar-error {
  text-decoration-color: #cc3300;
  text-decoration-style: wavy;
}

For example, a grammar checker might identify the incorrect verb in "She go to school."

::spelling-error

The ::spelling-error pseudo-element represents text identified as misspelled.

::spelling-error {
  text-decoration-color: #cc0000;
  text-decoration-style: wavy;
}

For example, a spelling checker might identify "webapge" as a misspelling of "webpage."

Both pseudo-elements depend on browser text-checking functionality.

Neither pseudo-element performs spelling or grammar analysis.

Support for either selector may be limited or unavailable in a particular browser.

Limitations

The ::grammar-error pseudo-element has several important limitations.

• Browser support is limited.
• It depends on grammatical errors being identified by the browser or its text-checking system.
• It does not perform grammar checking.
• It does not correct grammatical errors.
• It cannot force a browser to identify a particular word as incorrect.
• It supports only a restricted set of CSS properties.
• Grammar checking may depend on language and operating system settings.
• Browsers may use their own error indicators instead of custom CSS.

For example, the following rule does not automatically find grammatical mistakes:

p::grammar-error {
  text-decoration-color: red;
}

The rule only requests styling for text ranges already identified as grammar errors.

Ordinary paragraph text is not automatically checked simply because the selector appears in a stylesheet.

For applications that require consistent grammar checking, a separate grammar-checking system is needed.

Accessibility Considerations

Grammar indicators can help users identify possible writing mistakes, but they should remain clear and accessible.

Follow these accessibility practices:

• Use sufficient contrast between error decorations and surrounding text.
• Do not rely on color alone to identify grammatical errors.
• Preserve the browser's native text-editing functionality.
• Do not assume that every user has grammar checking enabled.
• Avoid using decorative effects that make text difficult to read.
• Allow users to review and correct their own text.
• Do not treat every grammar suggestion as an absolute error.

Grammar checking can produce different results depending on language, writing style, and context.

Users may intentionally use informal wording, technical terminology, or language variations that a grammar checker does not recognize.

Custom CSS should not interfere with text selection, editing, or assistive technology.

When the pseudo-element is unsupported, the interface should remain fully usable.

Browser Support

The ::grammar-error pseudo-element has limited browser availability and should not be relied upon for essential functionality.

Although browsers may provide native grammar checking, this does not necessarily mean they support CSS styling through ::grammar-error.

Browsers that do not recognize the selector ignore the corresponding CSS rule.

Grammar checking behavior can also differ depending on operating system settings, language support, and user preferences.

For current compatibility information, visit Can I Use? and search for ::grammar-error.

Also consult the MDN reference for browser compatibility and implementation details.

Specifications

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

The specification describes the pseudo-element's purpose and the CSS properties permitted for styling grammatical error ranges.

The browser remains responsible for identifying those ranges.