【CSS Modules】::spelling-error疑似要素の使い方

::spelling-error 擬似要素は、ユーザーエージェント（ウェブブラウザなど）によってスペルミスと判断されたテキストの箇所を表す擬似要素です。

この擬似要素は、HTMLの特定の要素に直接適用されるのではなく、その要素内のテキストコンテンツのうち、スペルエラーと識別された部分にCSSスタイルを適用するために使用されます。これにより、開発者はスペルミスがある箇所を視覚的にユーザーに伝えることができます。

例えば、ユーザーが入力フォームやテキストエディタで文章を入力している際に、ブラウザが内蔵するスペルチェック機能によって間違いが検出された場合、その誤った単語に対して自動的に::spelling-errorが適用されます。開発者は、この擬似要素に対してtext-decorationプロパティで下線を追加したり、background-colorプロパティで背景色を設定したりするなど、任意のCSSルールを定義できます。これにより、ユーザーは自分の入力内容にスペルミスがあることを容易に認識し、修正できるようになります。

この機能は、入力の正確性を高め、ユーザーエクスペリエンスを向上させる上で非常に有用です。特に、長い文章の入力や重要な情報の登録が必要なアプリケーションにおいて、誤入力の防止に貢献します。

ただし、スペルミスの検出ロジックや、::spelling-errorのサポート状況は、使用するユーザーエージェント（ブラウザ）の実装に依存します。また、ユーザーがブラウザのスペルチェック機能を無効にしている場合など、環境によってはこの擬似要素が期待通りに機能しない可能性もありますのでご注意ください。

Copy
1element::spelling-error {
2  /* プロパティと値を記述します */
3  text-decoration: wavy underline red;
4  color: red;
5}

引数なし

引数はありません

戻り値なし

戻り値はありません