imgタグを使わず、:before擬似要素で画像を表示させる方法

更新日：2021年1月20日

imgタグを使って画像を表示させる方法が最も一般的でポピュラーな方法ですが、同じ画像を繰り返し使う際にはいちいちimgタグを使うのがソースコード的にもっとさっぱり綺麗に整理出来ないかなと思う場面があります。
例えば新着情報に「お知らせ」という画像を使う時にいちいちimgタグを使っている場合とかですね。

そんな時には便利なCSSの:before擬似要素を使いましょう。

例えばHTMLは下記のように書きます。

インタビューを受けました
新聞に掲載されました。
Webサイトをリニューアルしました。

そして、CSSは下記のように書きます。
使う画像とurlの階層についてはご自身の環境に合わせて下さい。

.news:before {
	content: url(../images/news.jpg);
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
}

CSSの:before擬似要素で、newsというclassの前にHTMLソースコード上では見えない要素を追加しています。
どういう要素かというと、インラインブロック要素の右に2pxのmarginをあけた画像になります。
たったこれだけでimgタグを使わずとも画像の挿入が出来るようになります。

上のHTMLとCSSを適用すると下記のように表示されます。

インタビューを受けました

新聞に掲載されました。

Webサイトをリニューアルしました。

CSSの:before擬似要素を使うとソースコードも美しいものになります。
ご活用下さい！