2024.06.18

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事をシェアする

【jQuery】複数の要素(divタグ、pタグなど)を取得して操作する方法【初心…

【勝手にWEBサイトレビュー #08】細かい動きと工夫が面白い対人暴力防止プログ…