疑似要素に表示させた画像のサイズを変更したい

Question

複数の箇所に同じ矢印の画像を表示させたいと考えています。
そこで疑似要素に画像を入れることにしました。

またレスポンシブ対応させたいので、画像の大きさも変更できるようにしたいところです。

そこで次のようなコードを書きました。
すると画像は表示されるものの、画像のサイズが変化しません。
（imgフォルダの中に、arrow.pngを入れているという設定です。）

HTML
<a href="">
  <span class="arrow">お問い合わせはこちら</span>
</a>

CSS
.arrow::after {
  content: url(../img/arrow.png);
  display: inline-block;
  width: 12px;
  height: auto; 
  vertical-align: middle;
}

widthやheightの数値を変えても、（配置はズレたりしますが）画像自体の大きさは変わらないです。

なんとか画像サイズを変更させられないでしょうか？
よろしくお願いいたします。

Answer 1

backgroundの方が良いとは思いますが一応。

.arrow::after {
  content: url(../img/arrow.png);
  display: inline-block; 
  vertical-align: middle;
  transform: scale(値); /* 追加 */
}

Comments

[cheshire-cat]

ありがとうございました。変更できました。

Answer 2

contentに指定する方法だと、解決方法がわからないのですが、
background-imageに指定する方法だと、例えば以下のような書き方になると思います。

.arrow::after {
  /*
  content: url(../img/arrow.png);
  */
  content: "";
  background-image: url(../img/arrow.png);
  background-position: center;
  background-size: contain;
  
  display: inline-block;
  width: 12px; /* 好きなサイズを指定してください */
  height: 12px; /* 好きなサイズを指定してください。autoだと画像は表示されなくなります */
  vertical-align: middle;
}

Comments

[cheshire-cat]

ありがとうございました。変更できました。