::grammar-error

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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:

Syntax

::grammar-error {
  /* ... */
}

Examples

Basic document grammar check

In this example, eventual supporting browsers should highlight any flagged grammatical errors with the styles shown.

HTML

<p contenteditable spellcheck="true">
  My friends is coming to the party tonight.
</p>

CSS

::grammar-error {
  text-decoration: underline red;
  color: red;
}

Result

Specifications

Specification
CSS Pseudo-Elements Module Level 4
# selectordef-grammar-error

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Opera Safari Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet WebView Android
::grammar-error 121 121 No 107 17.4 121 No 81 17.4 25.0 121

See also

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/::grammar-error