::target-textでscroll-to-textを強調する

https://example.com#:~:text={target}という該当テキストの選択箇所へリンクする方法がある。そのときにどの部分が選択されているかを指すための::target-textという疑似要素が、全主要ブラウザで利用可能になった。

たとえばURL#:~:text={target}というリンクを開いたら、{target}の部分に当たるのが::target-text疑似要素だ。

::target-text {
  background-color: pink;
}

デモ

吾輩は猫である。

これはデモ用の文字列です。

名前はまだない。

デモ用の文字列のリンクをクリックすると、上記の「デモ用の文字列」の部分までスクロールしスタイルがあたる。