CSSの擬似要素に画像を入れた時にサイズが変更できない場合の対処法

CSSの擬似要素を使って画像を表示したい時に、::beforeや::afterを使ってcontentの中に画像のパスを指定するかもしれません。

しかし、この方法では画像サイズが変更できません。

 

今回はCSSの擬似要素を使って画像を表示したい時の正しい表示方法を紹介します。

 

サイズが変更できない悪い例

例えば以下のようなコードだとサイズが変更できません。

HTML

<p class="example">サンプル文</p>

 

CSS

.example:before {
  content: url(../img/face.png);
  display: inline-block;
  width: 5px;
  height: 5px;
}

 

この場合、:beforeのcontentのなかに画像のパスを指定して表示しようとしています。

一応表示はできますが、サイズの変更などができないためかなり使いづらいです。

 

サイズが変更できる正しい書き方

画像サイズを変更するにはbackground-imageに画像を指定するとサイズを変更できるようになります。

HTML

<p class="example">サンプル文</p>

 

CSS

.example:before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに!*/
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-image: url(../img/face.png);
  background-size: contain;
  vertical-align: middle;
}

 

contentには何も入れず、background-imageを使って画像を表示するようにします。

同時にbackground-sizeなども指定することができます。

また、display: inline-blockを指定しないと正しく画像が表示されないので忘れずに記述してください。

width、height、vertical-alignなどは場合によってそれぞれ変更しましょう。

 

というわけで、擬似要素に画像を表示したい場合はcontentに書くのではなく、background-imageに書くようにしましょう。