content:attr()と独自データ属性を使い方〜CSS

:beforeや:afterとセットで使用するcontentプロパティがありますが、その値にattr()という便利なものがあります。

attr()について
独自データ属性

attr()について

あまり使用しないcontentプロパティの値だけに見逃していましたが、使いようによってはスクリプト的に使えて便利かもしれません。
attr()の働きは引数で指定した属性の値を取ることができるものです。jQueryなど使ったことのある方なら、attr()の活用範囲の大きさはご存知のとおりです。

attr()を使用したサンプル

contentプロパティは指定した値をHTML上に表示することができますが、imgタグを値に入れても画像表示とはならないで、タグがそのままテキストで表示されます。そのため何らかのテキストを値にしてそのbackground-imageで画像を指定すると画像を表示することができます。
contentプロパティで挿入した文字の整形は同じセレクタの中で指定することができます。

HTMLコード

<p class="mypic" data-img="Concert"><img src="oce.jpg" alt="オーケストラ" width="380" height="380"></p>

CSSコード

.mypic:before{
	content:attr(data-img);
	display:block;
	width:100px;
	padding-top:80px;
	background-image:url(top1.jpg);
	margin:auto;
}
.mypic{
	text-align:center;
	border:1px #ccc solid;
	width:380px;
	vertical-align:bottom;
	padding:10px;
	box-shadow:10px 10px 10px #ccc;
}