This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.
The ::grammar-error
CSS pseudo-element represents a text segment which the user agent has flagged as grammatically incorrect.
Allowable properties
Only a small subset of CSS properties can be used in a rule with ::grammar-error
in its selector:
color
background-color
cursor
caret-color
outline
and its longhandstext-decoration
and its associated propertiestext-emphasis-color
text-shadow
Syntax
::grammar-error
Examples
Simple document grammar check
In this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.
HTML
<p>My friends is coming to the party tonight.</p>
CSS
::grammar-error {
text-decoration: underline red;
color: red;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Pseudo-Elements Level 4The definition of '::grammar-error' in that specification. | Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::grammar-error
|
Chrome
No support No |
Edge
No support No |
Firefox
No support No |
IE
No support No |
Opera
No support No |
Safari
No support No |
WebView Android
No support No |
Chrome Android
No support No |
Firefox Android
No support No |
Opera Android
No support No |
Safari iOS
No support No |
Samsung Internet Android
No support No |
Legend
- No support
- No support
See also
::grammar-error by Mozilla Contributors is licensed under CC-BY-SA 2.5.