さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS】疑似要素(:before、:after)で画像を表示する方法色々

Pocket
LINEで送る

疑似要素(: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;
}

カテゴリー:HP制作, css

コメントを残す

コメント内容