CSS ::spelling-error Pseudo-Element

CSS ::spelling-error Pseudo-Element

The ::spelling-error pseudo-element styles portions of text that a browser identifies as misspelled. It allows developers to customize spelling error indicators, such as wavy underlines, text colors, and highlight backgrounds, without changing the original text.

Syntax

selector::spelling-error {
  property: value;
}

The selector identifies the element whose spelling errors should receive the styling.

The ::spelling-error pseudo-element represents text segments that the browser has flagged as misspelled.

For example:

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

This rule requests a red wavy underline for text identified as incorrectly spelled.

To target a particular element:

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

This rule targets spelling errors inside text areas.

The pseudo-element does not accept arguments or use parentheses.

It uses the standard double-colon syntax for CSS pseudo-elements.

How It Works

Many browsers provide built-in spelling assistance for editable text.

When spell checking is enabled, the browser examines text and may identify words that are not recognized by its spelling dictionary.

The ::spelling-error pseudo-element represents the text segments flagged as spelling errors.

The process involves four steps:

1. The user enters text into an editable element.
2. The browser checks the text when spelling assistance is enabled.
3. The browser identifies any words it considers misspelled.
4. In supporting browsers, ::spelling-error styles those flagged text segments.

For example:

<p contenteditable="true" spellcheck="true">This sentnce contains a spelling error.</p>

The word sentnce is intentionally misspelled.

If the browser flags it as an error, the ::spelling-error pseudo-element can customize its appearance.

CSS does not determine whether a word is spelled correctly.

The browser's spelling system controls which text segments are identified as errors.

Spelling detection can vary according to the browser, operating system, language settings, and available dictionaries.

The spellcheck Attribute

The HTML spellcheck attribute indicates whether an element's text should be checked for spelling and grammar errors.

It is commonly used with editable elements such as text areas and contenteditable regions.

For example:

<textarea spellcheck="true"></textarea>

This enables spelling assistance for the text area, subject to browser support and user preferences.

Spell checking can also be enabled on editable paragraphs:

<p contenteditable="true" spellcheck="true">Edit this text.</p>

To request that spelling assistance be disabled:

<textarea spellcheck="false"></textarea>

When spell checking is disabled, the browser generally does not identify spelling errors for that element.

The spellcheck attribute and ::spelling-error serve different purposes.

The HTML attribute controls the checking preference, while the CSS pseudo-element controls the appearance of detected spelling errors.

The browser may still apply user preferences or platform-specific restrictions.

Styling Spelling Errors

The ::spelling-error pseudo-element supports several properties for customizing the appearance of misspelled text.

The most common styling uses a wavy underline:

::spelling-error {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #cc0000;
}

This requests a red wavy underline beneath spelling errors.

A background highlight can also be used:

::spelling-error {
  color: #990000;
  background-color: #ffe6e6;
}

This requests dark red text on a light red background.

Both techniques can be combined:

::spelling-error {
  color: #990000;
  background-color: #ffe6e6;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #cc0000;
}

The browser may limit or override some spelling error styling to preserve platform behavior and accessibility.

Custom styling should remain readable and should not interfere with editing text.

Targeting Specific Elements

The ::spelling-error pseudo-element can be combined with ordinary CSS selectors.

For example:

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

This targets misspelled text inside text areas.

A class selector can target a particular editable region:

.text-editor::spelling-error {
  background-color: #ffe6e6;
  text-decoration: red wavy underline;
}

This applies custom spelling error styling to an element with the text-editor class.

An ID selector can also be used:

#message-editor::spelling-error {
  text-decoration-color: #cc0000;
}

This targets spelling errors within the element identified by message-editor.

These selectors do not enable spell checking by themselves.

The browser must first identify text as misspelled before the styling can appear.

Example

The following example provides an editable text area containing intentionally misspelled words.

HTML:

<div class="spelling-error-demo">
  <label for="spelling-example">Edit the text below:</label>
  <textarea id="spelling-example" lang="en" spellcheck="true" rows="4">This sentnce has a speling mistake. You can corect the words.</textarea>
</div>

CSS:

.spelling-error-demo {
  max-width: 300px;
}
.spelling-error-demo label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}
.spelling-error-demo textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 4px;
  font: inherit;
  line-height: 1.5;
}
.spelling-error-demo textarea::spelling-error {
  color: #990000;
  background-color: #ffe6e6;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #cc0000;
}

Try it: Click inside the text area and edit one of the intentionally misspelled words.

The words sentnce, speling, and corect contain spelling errors.

If your browser identifies those words as misspelled and supports ::spelling-error, it may display the custom red highlighting and wavy underlines.

Some browsers identify spelling errors only after the text area receives focus or its contents are edited.

In browsers that do not support the pseudo-element, the browser may display its default spelling error indicators instead.

Note: The result depends on browser spell-check settings, language dictionaries, and platform support. The CSS cannot force a browser to identify a particular word as misspelled.

::spelling-error vs. ::grammar-error

The ::spelling-error and ::grammar-error pseudo-elements both style text flagged by the browser, but they represent different types of writing errors.

For example:

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

The first rule requests red wavy underlines for spelling errors.

The second rule requests blue wavy underlines for grammar errors.

These styles apply only when the browser identifies the corresponding error types and supports the pseudo-elements.

Not all browsers provide the same spelling and grammar checking capabilities.

Supported CSS Properties

The ::spelling-error pseudo-element supports a restricted set of CSS properties used for text highlighting and editing indicators.

For example:

::spelling-error {
  background-color: #ffe6e6;
  color: #990000;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #cc0000;
}

Properties such as display, width, padding, margin, and font-size cannot be used to change the layout of the flagged text.

Browser implementations may restrict particular visual effects to preserve native spelling indicators.

Highlight Inheritance

The ::spelling-error pseudo-element follows the special inheritance model used by CSS highlight pseudo-elements.

Highlight styling can inherit applicable properties from both the originating element and corresponding highlight pseudo-elements on ancestor elements.

For example:

.editor::spelling-error {
  color: #990000;
  text-decoration: red wavy underline;
}
.editor p::spelling-error {
  background-color: #ffe6e6;
}

The paragraph's spelling error highlight can inherit the text color and decoration styling from the ancestor highlight.

The paragraph rule adds a light red background.

When combining highlight styles, check that inherited text colors remain readable against any new background colors.

This inheritance model differs from ordinary CSS inheritance used by pseudo-elements such as ::before and ::after.

Limitations

The ::spelling-error pseudo-element has several limitations.

• It has limited browser availability.
• It cannot detect spelling errors by itself.
• It only styles text segments flagged by the browser.
• It depends on browser spelling assistance and language dictionaries.
• It supports only a restricted set of CSS properties.
• It cannot change the layout or dimensions of flagged text.
• Browsers may override custom styling to preserve native spelling indicators.
• Spelling errors may not be identified in every editable element or language.

Do not rely on ::spelling-error to validate text or enforce spelling requirements.

It is a presentation feature, not a spelling validation system.

For applications requiring consistent spelling analysis across browsers, a separate text checking solution may be necessary.

Accessibility Considerations

Spelling error indicators should help users identify possible mistakes without making editable text difficult to read.

Follow these accessibility practices:

• Maintain sufficient contrast between text and its background.
• Do not rely on color alone to identify spelling errors.
• Use recognizable indicators such as wavy underlines.
• Avoid excessive highlighting that makes text difficult to read.
• Preserve normal keyboard editing and text selection behavior.
• Respect browser and operating system accessibility settings.
• Provide appropriate language information using the HTML lang attribute.
• Do not disable native spelling assistance without a specific reason.

For example:

::spelling-error {
  color: #990000;
  background-color: #ffe6e6;
  text-decoration: red wavy underline;
}

This combines a text color, background highlight, and underline rather than relying on color alone.

Because spelling suggestions and correction interfaces are controlled by the browser or operating system, custom CSS should not interfere with those interactions.

Browser Support

The ::spelling-error pseudo-element has limited availability and is not yet a Baseline Widely available feature.

It is supported in Chrome 121 and later, Edge 121 and later, Opera 107 and later, and Safari 17.4 and later.

Firefox does not currently support the pseudo-element.

Even in supporting browsers, the appearance of spelling indicators can depend on operating system settings and whether the browser identifies the text as misspelled.

Unsupported browsers may continue displaying their native spelling indicators.

A CSS feature query can conditionally apply custom spelling error styling:

@supports selector(::spelling-error) {
  ::spelling-error {
    text-decoration: red wavy underline;
  }
}

This applies the declaration only when the browser recognizes the selector.

For current compatibility information, visit Can I Use? and search for ::spelling-error.

Specifications

The ::spelling-error pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 .

The specification describes how spelling error highlights are represented and which CSS properties may be used to style them.

Related features include ::grammar-error, ::selection, ::search-text, and the HTML spellcheck attribute.