部分リンクでも目立たせる！::target-text 擬似要素でリンク先のテキストを強調表示するCSS術

7月 14, 2025 7月 14, 2025

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
ページ内リンクで特定の段落や文言にジャンプしたとき、そのリンク先のテキストがどこか分かりづらい…と感じたことはありませんか？

特に長文ページやFAQセクション、用語辞典的な構造では、ユーザーが「リンク先で迷子になる」ことも。

そんな課題を解決してくれるのが、CSSに新しく追加された擬似要素
::target-text です。

これを使えば、ハッシュリンクでジャンプした先のテキストを自動でハイライト表示できるようになります！

::target-text とは？

::target-text は、CSS Selectors Level 4 で定義された擬似要素のひとつ。
ハッシュリンクで指定された「テキスト範囲」に対してスタイルを適用できる機能です。

たとえば、URLが

https://example.com/page#target-text=“お問い合わせはこちら”

となっていた場合、ページ内の該当する文字列だけがハイライトされます。

新仕様では、URLのハッシュに次のような形でテキストを直接指定します。

https://example.com/page#target-text="よくある質問"

ブラウザがこのテキストを検出し、該当箇所の文字をハイライトしてくれます。

::target-text {
background-color: yellow; 
padding: 2px 4px; 
border-radius: 3px; 
transition: background-color 0.3s ease; 
}

これだけで、該当テキストにジャンプした際に自動でハイライト表示されます！

たとえば「お問い合わせはこちら」のようなフレーズだけを目立たせたいとき、これまでの :target では対応が難しかったのですが、
::target-text を使えば文中の一部だけを安全に強調できるようになります。

::target-text は、ただ装飾を付けるだけでなく、ジャンプ先で何が強調されたかを視覚的に明示してくれるため、スクリーンリーダー利用者や高齢者ユーザーにとってもUX改善に繋がります。

::target-text は、文中のリンク先をピンポイントで目立たせる画期的なCSS機能です。

今後のWebライティングやナレッジベース構築において、
より使いやすく、より伝わるリンク設計を実現したいなら、::target-text は要注目です！

この記事を書いた人

静岡県浜松市在住のフリーランスWEBデザイナー小瀧です。サイト制作、デザイン制作、SEO対策等も行っています。お気軽にお問い合わせください！業務委託も大歓迎です！