Spelling and grammar text decorations
The text-decoration-line: spelling-error and text-decoration-line: grammar-error CSS declarations apply the browser's marking for spelling and grammatical mistakes. This is typically a wavy underline in red or green.
Overview
The text-decoration-line: spelling-error and text-decoration-line: grammar-error CSS declarations apply the browser's marking for spelling and grammatical mistakes. This is typically a wavy underline in red or green.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.text-decoration-line.grammar-error | 121 | 121 | 137 | 26.2 | 121 | 26.2 |
| CSS property | ||||||
spelling-error | 121 | 121 | 137 | 26.2 | 121 | 26.2 |
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-line: spelling-error;
}
.grammar-error {
text-decoration-line: grammar-error;
}Live demo
wavy line in alternativerepresentation
CSS wavy line in alternativerepresentation demo.
PreviewFullscreen
Use cases
Browser-native behavior
Use Spelling and grammar text decorations to rely on the platform for behavior that would otherwise require extra code or CSS complexity.
Progressive enhancement
Enhance the experience where support exists while keeping a solid baseline elsewhere.
Cautions
- Check browser support and actual product need before adding a new platform feature widely.
- Keep feature usage understandable so future contributors know why it was chosen.
Accessibility
- New platform features should still preserve readable defaults and robust interaction patterns.
- Verify that enhancement paths do not leave unsupported environments with a broken experience.
Related links
Powered by web-features