【CSS】疑似要素で表示した画像のサイズを調整する方法

疑似要素で表示した画像サイズの調整が上手くできない！といった悩みを持つコーダーに向けて、CSS疑似要素で表示した画像のサイズを調整する方法について解説します。

疑似要素で表示した画像のサイズ調整が難しい

contentにimgを指定した場合

画像サイズを調節しなくても良い場合や、ちゃちゃっと画像を表示したい場合はcontentに画像パスを指定する方法で問題なしです。

しかし画像のサイズ調整をしたい場合、transformのscaleを使用するしかなく、サイズの変更がやや不便です。

疑似要素で表示した画像のサイズ調整を行う方法

疑似要素の背景画像として表示する

backgroundプロパティを使用して背景画像として表示すれば、widthとheightで画像サイズを調節できます。

コード

::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../images/icon.png);
  background-size: contain;
}

コードの解説

contentの指定

背景画像として画像を表示するため、contentプロパティの値は空にします。

displayの指定

疑似要素のdisplayプロパティの初期値はinlineであるため、inline-blockを指定します。
そうすることで、widthとheightを使ったサイズ調整が可能になります。

background-sizeの指定

background-sizeにはcontainを指定します。
containを指定することで、指定したサイズの中に背景画像全体がすっぽり入ります。

疑似要素の背景画像として表示した方が良い場面

テキストの前後に画像などを挿入する

例えば、使用頻度の高い「アイコン」＋「テキスト」のセット。
この場合はアイコンを背景画像として表示すると、アイコンのサイズ調節が便利です。

また画像のサイズをemで指定しておくと、レスポンシブ対応の際にテキストのfont-sizeが変更されても、バランスを崩すことなく表示することができます。

まとめ

疑似要素を使って画像を表示する際は、背景画像として表示してあげるとレスポンシブ対応もすごく楽になります。
この機会に使いこなせるようにしましょう！