擬似要素での画像挿入するときのスタイル

擬似要素で画像（ボタンのマークとか）を表示させるときよくやるやつ

CSSの書き方をメモ

ボタンにグラデーションとか使ってるときは、いろいろめんどくさいので
:before :after擬似要素を使って背景画像を指定
image-url()はいつも使うようにする
$srcとimage-width()はSPサイトのときに使用
└ PCのときはサイズ違いのアイコンを使いまわすことが多いので、直接サイズ指定

scss

.title{
	$src: 'img/plus-icon.png';
	text-decoration: underline;
	color: #206fb8;
	&:before{
		padding-right: 5px;
		content: "";
		display: inline-block;
		position: relative;
		top: 2px;
		width: image-width($src)/2;
		height: image-height($src)/2;
		background: image-url($src) no-repeat center center;
		background-size: image-width($src)/2 image-height($src)/2;
	}
	&.active:before{
		background-image: image-url('img/minus-icon.png');
	}
}

content: "url()"でも画像を表示できるが、サイズの指定ができないので上のように擬似要素のバックグラウンドで画像を指定するのがベター