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

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

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

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

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