【CSS】すぐに使える　擬似要素で画像を表示する方法　

今回は、擬似要素で画像を表示する方法をご紹介します。

タイトルの装飾やアクセントをつけるときに画像を使用するときがあります。

HTMLにimgタグを書いて、インラインブロックにするのかな・・・。

と悩む方もいると思いますが、擬似要素で画像を表示できるので、ぱぱっと理解ちゃいましょう。

コード

【HTML】

<h1 class="title">タイトル</h1>

【CSS】

.title::after{
content: url("ファイルパス");
vertical-align: middle;
display: inline-block;
}

これで、タイトルの後ろに画像が表示されます。
画像の大きさを調整しないケースはこれでＯＫです。

画像の大きさを調整する場合

画像の大きさを変更する場合は、下記のとおりです。

【CSS】

.title::after{
content: " ";
background-image: url(ファイルパス);
background-size: contain;
vertical-align: middle;
display: inline-block;
width: XX;
height:XX;
}

background-image で画像を設定しましょう。

そして大きさはwidth と height で調整できます。

まとめ

いかがでしたでしょうか。

疑似要素に画像を設定できますので、タイトルの装飾に使えます。

ポイントは二つです。

• 画像の大きさの調整が不要な場合はcontent に設定する。
• 画像の大きさを変える時は background-image に設定しましょう。

ぜひ使ってみましょう。

疑似要素に関連する記事も紹介しておきます。