::spelling-error and ::grammar-error
The ::grammar-error CSS pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.
The ::grammar-error pseudo-element follows a special inheritance model common to all highlight pseudo-elements. For more details on how this inheritance works, see the Highlight pseudo-elements inheritance section.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 121 | 121 | | 17.4 | 121 | 17.4 | |
| Other | ||||||
| `::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)
Syntax
CSS
::spelling-error {
text-decoration: wavy underline red;
}
::grammar-error {
text-decoration: wavy underline green;
}Live demo
Use cases
-
Using ::spelling-error and ::grammar-error
The ::grammar-error CSS pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.