【CSS】ニッチだけど知っておきたい、テキストを強調するための擬似要素

Last updated at 2025-12-17Posted at 2025-12-17

はじめに

みなさんは、「テキストを強調するための擬似要素」が意外とたくさんあることをご存知でしょうか？

ユーザーが選択した文字のスタイルを変える ::selection は、有名で使ったことがある方も多いと思います。
でも実は、それ以外にも「こんな時に使えるの!?」というニッチだけど便利なテキストを強調するための擬似要素がいくつか存在します。

そのためこの記事では、そんな“記憶の片隅に置いておきたい”テキスト強調系の擬似要素をまとめて紹介しようと思います。

今回紹介する擬似要素は以下の通りです。

::selection を使うと、選択している文字のスタイル変更することができます。

See the Pen immersive by degudegu2510 | Qiita (@degudegu2510) on CodePen.

ページ内リンクにした文字のスタイルを変更することができます。

See the Pen ::target-text by degudegu2510 | Qiita (@degudegu2510) on CodePen.

ブラウザ内検索したテキストのスタイルを変更することができます。
iframeだとうまくいかないみたいなので、codepenは省略します。

<p>この文字を検索してください（デフォルト）</p>
<p class="search-text">この文字を検索してください（::search-text）</p>

.search-text::search-text {
  background: #67CB1B;
  color: #000000;
}

::highlight()は、CSS.highlights.set() で登録したハイライトに対して、スタイルを変更することができます。

See the Pen ::target-text by degudegu2510 | Qiita (@degudegu2510) on CodePen.

スペルミステキストのスタイルを変更することができます。

See the Pen ::highlight() by degudegu2510 | Qiita (@degudegu2510) on CodePen.

文法ミスのスタイル変更を変更することができます。

See the Pen ::spelling-error by degudegu2510 | Qiita (@degudegu2510) on CodePen.

テキストを強調すると一言で言っても、目的やタイミングによって使うべき擬似要素は大きく異なります。
::selection のように知られているものから、::highlight() や文法チェック系のように「使う場面は限られるけど便利」なものまで、いろんな種類があります。

普段の開発ではあまり登場しないかもしれませんが、頭の片隅に置いておくと便利かも知れません。

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。