::spelling-error and ::grammar-error

::spelling-errorと::grammar-errorは、ブラウザのスペルチェック機能によってミススペルや文法エラーとしてマークされたテキストのスタイルをカスタマイズする擬似要素です。デフォルトの赤や緑の波線をブランドカラーに変更したり、異なるスタイルのハイライト表示にカスタマイズできます。テキストエディタやCMS管理画面のUI統一に有用です。

擬似要素スペルチェック

概要

対応ブラウザ

デスクトップ

Chrome 121+

Edge 121+

Safari 17.4+

Firefox 未対応

モバイル

Chrome Android 121+

Safari iOS 17.4+

Firefox Android 未対応

基本構文

CSS

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

実務での使いどころ

スペルチェック表示のカスタマイズ

ブラウザのスペルチェック・文法チェック機能のハイライト表示をアプリケーションのデザインに合わせてカスタマイズします。

注意点

Firefoxでは未サポートであり、使用できるCSSプロパティも限定されています（color、background-color、text-decorationなど）。

参考リンク

MDN Web Docs — ::spelling-error and ::grammar-error

概要