CSSの擬似要素<before/after>画像の大きさを変更する

CSSの擬似要素<before/after>で画像の大きさを変更したい場合の方法

通常の指定方法
content: url(〇〇〇);
これだと画像の大きさを変更することはできません。

h2::before {
  content: '';
  display: inline-block;
  width: 100px;
  height: 33px;
  background-image: url(〇〇〇);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

画像を背景で指定してあげれば大きさは変更可能。

 

コメント

タイトルとURLをコピーしました