概要

このデモはCSSの疑似クラス:target-before、:target-after、 :target-currentを使用した ヘッダーの実装例です。ページをスクロールしてヘッダーのスタイルが変化するのを確認してみてください。

scroll-target-groupプロパティをナビゲーションのリストに設定すると :target-current、:target-before、:target-after 疑似クラスが使えるようになります。

:target-after疑似クラスは、現在のアクティブな要素（ :target-current）よりも 後ろにある要素に対する疑似クラスです。つまり、ユーザーがまだ閲覧していないセクションに対応するリンクをスタイリングできます。

このデモでは、未読のセクションを明るい紫色と下線で表示しています。

:target-before疑似クラスは、現在のアクティブな要素（ :target-current）よりも前にある要素に対する疑似クラスです。 これにより、ユーザーがすでに通過したセクションを視覚的に区別できます。

このデモでは、通過ずみのセクションをグレー色で表示しています。

今まではスクロール追従ナビゲーションを実装するには、JavaScriptを組み合わせて実装する必要がありました。

CSSの:target-before、:target-after を使用することで、これらの処理がすべてブラウザ側で行われます。