`::spelling-error` CSS pseudo-element

Baseline Limited availability

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

The ::spelling-error CSS pseudo-element represents a text segment which the user agent has flagged as incorrectly spelled.

The ::spelling-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 ::spelling-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

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

Examples

Basic document spell check

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

HTML

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

CSS

::spelling-error {
  text-decoration: wavy red underline;
}

Result

Specifications

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

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`spelling-error`	121	121	No	107	17.4	121	No	81	17.4	25.0	121	17.4