Tweet

Pocket

疑似要素（:before、:after）を使って画像を表示する方法を幾つかまとめた。

scss

/* 画像をそのままのサイズでインライン配置 */
&:before {
	content: url(img/test.png);
	margin: 0 10px 0 0;
	position: relative;
	top: 2px;
}

/* インラインで配置（画像のリサイズ可）*/
&:before {
	content: "";
	background: url(img/test.png) no-repeat center center;
	background-size: cover;
	width: 15px;
	height: 10px;
	margin: 0 10px 0 0;
	position: relative;
	top: 0;
	display: inline-block;
}

/* 画像を180°回転して配置 */
&:before {
	transform: rotateX(180deg);
	content: "";
	background: url(img/test.png) no-repeat center center;
	background-size: cover;
	width: 15px;
	height: 10px;
	margin: 0 10px 0 0;
	position: relative;
	top: 0;
	display: inline-block;
}

/* 画像を絶対配置（親要素に「position: relative;」を設定） */
&:before {
	content: "";
	background: url(img/test.png) no-repeat center center;
	background-size: cover;
	position: absolute;
	width: 15px;
	height: 10px;
	left: 10px;
	top: 50%;
	margin:-5px 0 0 0;
}