:target擬似クラスと::after要素を使って、選択状態を表示します。

サンプルの横並びボタンは、フラグメント識別子「#」のついたURIを使って、同じHTML内のターゲット要素（下側のdiv）にリンクしています。

ボタンのhtmlソース（最初の例、以下同様）

<li><a href="#item01">item01</a></li>

下側のdivのhtmlソース（最初の例、以下同様）

<div id="item01">id属性値"item01"を持つdiv要素</div>

任意のボタンをクリックすると、そのボタンのhrefで指定したターゲット要素（div）に飛びます。CSSの:target擬似クラスで飛び先の文字色を#777から#000に変更し、同時に::after要素を使って、div要素の後ろにcolor:redの文字列を追加しています。

CSSソース

div:target {
	color: #000;
	}
div:target:after {
	content:  " ←この要素を選択しています";
	color: red;
	}

• item01
• item02
• item03
• item04
• item05
• item06
• item07