CSS3 :empty疑似クラスと、:after擬似要素を使って、テキスト無しリンクの処理

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

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

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

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

サンプル[1]

（１）サイトマップ
（２）
（３）

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

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

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

サンプル[2]

（１）サイトマップ
（２）
（３）

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

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