このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

::spelling-error

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

::spelling-errorCSS擬似要素で、綴りが正しくないとユーザーエージェントが判断したテキストの区間を示します。

::spelling-error 擬似要素は、すべての表示強調擬似要素に共通する特別な継承モデルに従います。この継承の仕組みの詳細については、表示強調擬似要素の継承の節を参照してください。

利用できるプロパティ

::spelling-error を含むセレクターのルールでは、ごく一部の CSS プロパティのみを使用することができます。

構文

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

文書の単純なスペルチェック

この例では、最終的に対応しているブラウザーでは、表示されたスタイルでフラグ付きのスペルミスを強調表示します。

HTML

html
<p contenteditable spellcheck="true">
  My friends are coegdfgfddffbgning to the party tonight.
</p>

CSS

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

結果

仕様書

Specification
CSS Pseudo-Elements Module Level 4
# selectordef-spelling-error

ブラウザーの互換性

関連情報