【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

タイトルやテキストの文頭にアイコンをつける装飾は、Web制作ではかなりの頻度で使うデザインです。
例）よくある質問のQAアイコン、チェックリストの矢印など

テキストの文頭にアイコンが入っているだけでWebサイトが明るくなります。

テキストの文頭に画像を入れる場合、疑似要素のbeforeやafterを使うのが便利です。

疑似要素については以下記事をご参考ください。

コーディング

2021.02.06

【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

タイトルやテキストの文頭にアイコンをつける装飾は、Web制作ではかなりの頻度で使うデザインです。例）よくある質問のQAアイコン、チェックリストの矢印など テキス…

今回はこの疑似要素(before, after)に画像を表示させる方法をご紹介します。

疑似要素(before,after)に画像を表示させる1番シンプルな方法

まずは、疑似要素(before,after)に画像を表示させる最もシンプルな方法をご紹介します。

以下コードをご覧ください。

See the Pen 疑似要素に画像表示(シンプル) by spiqa design (@spiqa_design) on CodePen.

「content」に示させたい画像のURLを指定します。

後は、「margin-right」で画像とテキスト間の余白を調整し、「vertical-align」で画像の上下位置を調整します。

たったこれだけです！とても簡単ですね。

しかし、この方法ではサイズがピッタリな画像を入れなければなりません。上記コードに「width」と「height」を指定しても効かないのです。

上記コードでは、幅15ピクセル×高さ15ピクセルのピッタリな画像を入れているのできれいに表示されていますが、これを幅40ピクセル×高さ40ピクセルの画像に変えてみましょう。

See the Pen 疑似要素に画像表示(失敗例) by spiqa design (@spiqa_design) on CodePen.

画像が大きすぎて崩れてしまっています。

「width: 15px;」と「height: 15px;」を指定していますが、効いていないのがわかります。

疑似要素(before,after)に表示させた画像のサイズを変更する方法

上記が最もシンプルな方法ですが、テキストのサイズが変更になった時にまたピッタリなサイズの画像に差し替えるのは面倒ですね…

そこで、画像サイズもCSSで変更可能な方法をご紹介します。

See the Pen 疑似要素に画像表示(サイズ変更可能) by spiqa design (@spiqa_design) on CodePen.

「content」に画像URLを入れるのではなく、backgroundで背景として画像を表示させます。

幅40ピクセル×高さ40ピクセルの画像を入れていますが、CSSの「width: 15px;」と「height: 15px;」が効いてピッタリのサイズになっています！

右上の「Codepen」をクリックすると上記コードを編集できる画面に飛ぶので試しに「width」と「height」のサイズを変えてみてください。

疑似要素(before,after)に画像を表示させる方法まとめ

背景で画像を表示させる方が応用が効くので、基本そちらを使用することおすすめします。

上記コードをコピペしてご活用ください！