::grammar-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 ::grammar-error pseudo-element represents text that a user agent (such as a browser or assistive technology) has identified as containing a grammatical error. It is part of the CSS Pseudo-Elements Module and is primarily used to visually highlight grammar issues detected by built-in language tools, spellcheckers, or editing engines. Unlike developer-defined markup, this pseudo-element is applied automatically by the browser when grammar checking is enabled and supported. It allows authors to style grammar feedback in a consistent, non-intrusive way without altering the underlying document structure.

The ::grammar-error pseudo-element is typically seen in editable contexts such as contenteditable regions or form fields (for example, a textarea). When the browser detects a grammatical issue, it may wrap the affected text internally and expose it through this pseudo-element. Authors can then apply visual cues such as underlines, background highlights, or text decorations. This pseudo-element behaves similarly to other error-related pseudo-elements but is focused specifically on grammar rather than spelling or syntax, making it useful for accessibility-focused design and writing tools.

Styling ::grammar-error helps users quickly identify and correct mistakes without relying solely on browser defaults. Common use cases include educational tools, CMS editors, or content-writing interfaces where clarity and usability are important. While browser support may vary, defining styles for this pseudo-element is safe and future-proof, as unsupported browsers will simply ignore it without side effects.

Example: Styling Grammar Errors

::grammar-error {
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
  background-color: rgba(255, 0, 0, 0.05);
}

This example applies a subtle red wavy underline and a faint background highlight to any text flagged as a grammatical error.

Example: Editable Text Area

<div contenteditable="true">
  This sentence have a grammar mistake.
</div>

When grammar checking is enabled in the browser, the incorrect portion of the sentence may be styled using the ::grammar-error rules defined above.

You can combine ::grammar-error with other pseudo-elements such as ::selection to improve text interaction feedback.
Visual styling often uses properties like text-decoration or background-color to remain subtle yet noticeable.
Grammar detection behavior is user-agent dependent and may vary based on language settings, platform, or accessibility tools.

This pseudo-element is especially useful when building writing-focused interfaces where clarity, accessibility, and user guidance are important.

Syntax

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

Example

HTML

<body>



  <h1>Grammar Error Styling Example</h1>

  

  <p>

    The browser's grammar checker needs to be active for this to work. 

    Try typing something grammatically incorrect in the box below:

  </p>



  <div contenteditable="true" class="editor">

    I has a apple which are green.

  </div>



</body>

CSS

/* Target the grammar error flagged by the browser */

div::grammar-error {

  background-color: #ffcccc;

  text-decoration: underline wavy red;

  color: #b22222;

}



/* General styling for the editable area */

.editor {

  border: 1px solid #ccc;

  padding: 20px;

  width: 300px;

  min-height: 100px;

  font-family: sans-serif;

  line-height: 1.5;

}

Result

Editor

Browser Support

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