What Is the CSS ::grammar-error Pseudo-Element?

The CSS ::grammar-error pseudo-element allows web developers to customize the visual appearance of text that the user agent flags as grammatically incorrect. While browsers traditionally render grammar warnings using default visual markers—such as a wavy green or blue underline—this pseudo-element gives developers the ability to override those defaults so grammar highlights match an application's specific design language.

Purpose and Functionality

Modern browsers often include built-in linguistic tools to identify writing mistakes inside editable regions, such as <textarea>, <input>, or any element with contenteditable="true". While the related ::spelling-error pseudo-element targets misspelled words, ::grammar-error specifically targets phrases or sentence structures flagged by the browser's grammar engine.

When a browser identifies a grammatical issue, it wraps that portion of the document tree with a styling hook accessible via ::grammar-error.

Permitted CSS Properties

To maintain page layout stability and prevent performance degradation, the CSS specification restricts which properties can be used inside ::grammar-error. You cannot modify layout-affecting properties such as margin, padding, or font-size.

Only a specific subset of text-styling properties is supported:

  • Text Decoration: text-decoration, text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness.
  • Colors: color and background-color.
  • Text Shadows: text-shadow.
  • SVG Properties: stroke-color, fill-color, and related styling where supported.

Syntax and Implementation

You can define grammar error styles globally across the document or target specific editable containers:

/* Apply globally to all grammar errors */
::grammar-error {
  text-decoration: underline wavy #10b981;
  background-color: rgba(16, 185, 129, 0.1);
}

/* Apply only inside a specific editor */
.rich-text-editor::grammar-error {
  text-decoration-color: #059669;
  text-decoration-style: dotted;
}

Requirements and Browser Behavior

For ::grammar-error to take effect, two conditions must be met:

  1. Active Spellchecking: The element must permit text checking, typically ensured by including the spellcheck="true" attribute on the element or relying on default browser behavior for text fields.
  2. Platform Support: The underlying browser and operating system must support and have an enabled grammar checker. If the user disables grammar checking in their browser settings, or if the operating system lacks grammar-checking capabilities for the active language, the pseudo-element will not trigger.