::spelling-error CSS Pseudo Element

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The ::spelling-error pseudo-element in CSS is designed to target text segments that a browser identifies as misspelled according to its spell-checking engine. When applied, it allows developers to style these sections of text differently, providing a visual cue to users that the content may contain typographical errors. This can be particularly useful in rich text editors, content management systems, or any user-facing input fields where spelling feedback is desirable.

Unlike standard elements, ::spelling-error does not affect the document structure; it purely provides a styling hook for text that fails spell-check validation. This pseudo-element can be used in conjunction with ::selection or ::marker pseudo-elements to create a more interactive or visually informative text editing experience.

Styling this pseudo-element typically involves visual properties such as text-decoration, color, and background-color. For instance, a common approach is to underline misspelled words with a wavy red line, mimicking the behavior found in many word processors and web editors.

Here is an example of how ::spelling-error can be used in CSS and HTML:

<p contenteditable="true">
  This is an exampel of a sentense with speling errors.
</p>

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

In this example, any misspelled words inside the editable <p> element are highlighted with a red wavy underline and a light red background. Note that the effectiveness of this pseudo-element depends on the browser’s spell-check functionality being enabled for the content.

The ::spelling-error pseudo-element provides a user-friendly way to visually flag errors without modifying the underlying content, complementing other interactive pseudo-elements and properties in modern CSS workflows.

Syntax

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

Example

HTML

<body>



  <div class="editor-container">

    <label for="spell-box">Type something misspelled here:</label>

    <div 

      id="spell-box" 

      contenteditable="true" 

      spellcheck="true">

      This sentance has a verry obvius spelling error.

    </div>

  </div>



</body>

CSS

/* Target the browser's identified spelling errors */

#spell-box::spelling-error {

  background-color: rgba(255, 0, 0, 0.2);

  text-decoration: wavy underline red;

  color: darkred;

}



/* Basic styling for the container */

.editor-container {

  margin: 20px;

  font-family: sans-serif;

}



#spell-box {

  border: 1px solid #ccc;

  padding: 10px;

  min-height: 100px;

  width: 400px;

  line-height: 1.5;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS ::spelling-error pseudo element. Hover over a browser icon to see the version that first introduced support for this CSS psuedo element.