サンプル（最下段）は、テキストが短縮されていて、下側の「続きを表示」をクリックすると、隠されたテキストを表示、という良くあるパターンです。これをCSS3の :target疑似クラスを主に使って、CSSだけで作成してみました。

サンプルのhtmlソース

<div id="sample01">
    [ダミーテキスト１]ポイントカードを発行し、商品の購入者に対し、次回以降の買い物の際に支払いの
    一部に充当できるポイントを提供する場合は、景品ではなく値引。
</div>
<a href="#sample01">続きを表示</a>
<a href="#sample02">続きを隠す</a>
<span id="sample02">　</span>

 

サンプルのCSSソース

#sample01  {
	width:800px;
	margin:0 auto;
	padding:8px 10px 10px; 
	text-align:left;
	border:1px solid #bbf;
	color:#666;
	}
#sample01 ~ a  {
	display:none;
	}
#sample01 + a  {
	display:inline;
	}
#sample01:target::after  {
	content:"取引通念上妥当と認められる基準に従い、取引の相手方に対し、支払うべき対価を減額する
	こと又は割り戻すことは、値引と認められる経済上の利益に該当し、景品表示法上の景品類には該当
	しません。";
	color:green;
	}
#sample01:target ~ a  {
	display:inline;
	}
#sample01:target + a  {
	color:#aaa;
	pointer-events: none;
	}

 

「id="sample01"」のdiv要素に弟要素であるa要素を2つ続けています。CSSの9行目から14行目で、隣接セレクタと間接セレクタを使い、2つの弟a要素を非表示に、続いて最初のa要素のみを表示させています。

最初のa要素である「続きを表示」をクリックすると、ページ内リンクで、「id="sample01"」のdiv要素に飛びます。すると、:target疑似クラスと:after擬似要素により、続きのテキストを表示（確認用に緑色文字にしています）します。15行目から20行目。

同時に、21行目以降で、:target疑似クラスと隣接セレクタと間接セレクタを使い、9行目からの2つのa要素のスタイルを逆にしています。このとき、2つのa要素を表示させ、最初のa要素のみを非表示にさせようとしましたが、なぜか引きずられて2つとも非表示になってしまいます。そこで、最初のa要素のみを薄消し状態の色で表示したままにしています。

続きのテキストを表示した状態で、「続きを隠す」をクリックすると、「id="sample02"」へ移動するため、:target疑似クラスが聴かなくなり、スタイルが元に戻ります。

 

サンプル

続きを表示 続きを隠す