::spelling-error and ::grammar-error | Frontend Practical Guide

Overview

The ::spelling-error and ::grammar-error CSS pseudo-elements match text that is highlighted as misspelled and grammatically incorrect, respectively.

Feature	Desktop				Mobile
Feature	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:grammar-error`	121	121		17.4	121	17.4
Other
`css.selectors.spelling-error` `::spelling-error`	121	121		17.4	121	17.4

1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

CSS

::spelling-error {
  text-decoration: wavy underline red;
}
::grammar-error {
  text-decoration: wavy underline green;
}

CSS spellerrordecoration demo.

CSS text methoderrordecoration demo.

CSS both. combination demo.

Using ::spelling-error and ::grammar-error
The ::spelling-error and ::grammar-error CSS pseudo-elements match text that is highlighted as misspelled and grammatically incorrect, respectively.