ページ内目次

before擬似要素で指定した背景画像の位置決め – 行頭マークなどの配置

こんな具合にメニュー項目の左側にアイコンをつけたい。なんて場合が多々ありますが、あとあとのメンテナンスのしやすさや、工数を削減するために、既存サイトのコンテンツを活用しながらデザインリニューアルするために、HTMLに image タグで配置するのではなく、スタイルシートに before 擬似要素として設定することが多いのです。

多いのですが、ちょうどよい位置決めの方法をいつも忘れます(笑)

覚えようという意志がないのだと思うので、メモしておくことにしました。

li a{
	position:relative;
	line-height:1em;
	text-indent:1em;
}
li a:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	background:url(icon.png) no-repeat;
	background-size:contain;
}

「line-height」「text-indent」の値を変えることで微調整してます。

↑上へまいりま〜す