CSSのcontentで画像を指定する

CSSのcontentで画像を指定する方法と、疑似要素で追加した画像のサイズを変更する方法をメモ。

サンプルコード

contentプロパティは疑似要素の::beforeと::afterの内容を指定するプロパティです。
内容に画像を指定する場合、「url(画像パス)」のような形で指定します。

HTML

<ul class="list">
	<li class="list_item">
		<a href="">リスト</a>
	</li>
	<li class="list_item">
		<a href="">リスト</a>
	</li>
	<li class="list_item">
		<a href="">リスト</a>
	</li>
</ul>

CSS

.list_item a::after {
	content: url(./arrow.png);
	display: inline-block;
	vertical-align: middle;
}

リストの後ろに矢印の画像が追加されました。
contentで画像を指定するデモページ
　

contentで追加した画像にはサイズを指定することができません。
そのため、サイズを変更したい場合はtransformプロパティのscale()で拡大・縮小させます。

CSS

.list_item a::after {
	content: url(./arrow.png);
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

transformでサイズ変更のデモページ
　

もしくは、contentで画像を追加するのではなく、疑似要素の背景として画像を指定することでもサイズ変更を行えます。

CSS

.list_item a::after {
	content: '';
	display: inline-block;
	width: 9px;
	height: 10px;
	vertical-align: middle;
	background: url(./arrow.png);
	background-size: 9px 10px;
	margin-left: 5px;
}

width/heightとbackground-sizeで画像のサイズを指定しています。
backgroundで画像指定のデモページ
　

【参考サイト】

• http://tenman.info/labo/css/?p=401