`::grammar-error` CSS pseudo-element

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.

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 longhands
text-decoration and its associated properties
text-emphasis-color
text-shadow

Syntax

css

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

Examples

undefined

Basic document grammar check

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

HTML

html

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

CSS

css

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

Result

Specifications

CSS Pseudo-Elements Module Level 4

::grammar-error CSS pseudo-element