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で画像指定のデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30