リンクをクリックする毎に同じ場所のテキストを書き換えます。javascriptなどを使うと簡単に実装できますが、これを:target疑似クラスと:before疑似要素を使って、CSSのみでおこないます。

サンプル（最下段）は、「書き換え内容01」から「書き換え内容03」までの3つのリンク（薄いブルーの文字）があり、クリックすると、それに続くそれぞれの内容を「ここをテキストを表示→」の次に書き換えて表示します。

書き換えは実際にテキストを置き換えている訳ではなく、クリックで表示するテキスト以外を「font-size:0」で、非表示にしています。

サンプルのhtmlソース

<ul>
  <li><a href="#target01">書き換え内容01：</a>「ポイントカードを発行し、商品の購入者に対し、」</li>
  <li><a href="#target02">書き換え内容02：</a>「次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、」</li>
  <li><a href="#target03">書き換え内容03：</a>「景品ではなく値引。」	</li>
</ul>
<div id="target"><b>ここをテキストを表示→　</b>
  <span id="target01"></span>
  <span id="target02"></span>
  <span id="target03">
</div>

 

サンプルのCSSソース

span#target01 ~ span:target,
span#target02 ~ span:target,
span#target03 ~ span:target {
	font-size:0;
	}
span#target01:target:before {
	font-size: 15px; 
	content: "「ポイントカードを発行し、商品の購入者に対し、」";
	}
span#target02:target:before {
	font-size: 15px; 
	content: "「次回以降の買い物の際に支払いの一部に充当できるポイントを提供する場合は、」";
	}
span#target03:target:before {
	font-size: 15px; 
	content: "「景品ではなく値引。」";
	}

 

サンプル