:empty疑似クラスと、:before擬似要素を使って、テキスト無しのリンクを自動処理します。

a要素で、title属性やhref属性が正しく記述されているのに、外部ファイルを読み込むなどしたとき、

何かの具合でリンクのテキストが欠落した場合、何も表示されないことになってしまうので、それを自動判別して、代わりにtitle属性やhref属性を表示させます。

サンプル[1]は、(2)と(3)のa要素にテキストが無いため、リンクが表示されません。

サンプル[1]

(1)サイトマップ
(2)
(3)

サンプル[1]のhtmlソース

<div id="sample1">
  (1)<a title="サイトマップ" href="http://www.conifer.jp/sitemap2.html">サイトマップ</a><br>
  (2)<a title="営業日カレンダー" href="http://www.conifer.jp/calender2.html"></a><br>
  (3)<a title="マメ知識一覧(TOP)" href="http://www.conifer.jp/coni-mame-top.html"></a>
</div>

サンプル[2]では、[1]と同じhtmlを使って、テキストの無い(2)と(3)のa要素のtitle属性とhref属性を表示させています。

サンプル[2]

(1)サイトマップ
(2)
(3)

サンプル[2]のCSSソース

#sample2 a[href^="http"]:empty::after {
	content: attr(title)" : "attr(href);
	}	
戻るボタン