【CSS】::target-textで特定のテキストハイライト

どうも、くまだです。

::target-textというCSSで特定テキストをハイライトメモ。

::target-textで特定のテキストハイライト

::target-textプロパティは、特定のリンクから特定の文言に遷移したとき、遷移先のテキストをハイライトすることができます。

コードは以下になります。

〇 index.html

<a href="http://example.com/about.html#:~:text=よくある質問">よくある質問はこちら</a>

〇 about.html

<p>よくある質問あああ</p>

::target-text {
  background-color:red;
  padding: 2px 4px;
  border-radius: 4px;
}

index.htmlでボタンをクリックすると、about.htmlに遷移し、「よくある質問」のテキストのみ赤背景のハイライトで表示されます。

aタグのurlの末尾に、「#:~:text=～～」をいれて「～～」のところにハイライトさせたいテキストをいれます。ただし、複数の同じ文言を同時にハイライトはJSと組み合わせないとできなさそうです。

ここまで読んでくださりありがとうございました。