CSS ::grammar-error

The ::grammar-error pseudo-element targets text ranges that the user agent has marked as grammatical errors. It depends on browser editing features and language tools, so authors cannot force arbitrary text to match it.

Syntax

::grammar-error {
  text-decoration: underline wavy #ef4444;
}

Example

::grammar-error {
  text-decoration: underline wavy #ef4444;
  text-decoration-thickness: 0.1rem;
}

Result:

A browser may apply this only inside editable text when grammar checking is available.

Important note

Use this as a progressive enhancement. For custom editors that need guaranteed grammar feedback, render your own marked ranges after analysis.