【Railsあるある】疑似要素の背景が表示されない

昨日の夜。

railsで、::beforeでいれてるbackground-image: image-url(ほにゃほにゃ.svg)が表示されないのなんでや……

— ユーホ (@tnkyy) 2020年3月9日

もう眠いから明日にしよ……。ということで、今朝格闘していた。

結論

疑似要素の背景画像で表示させたい場合（ボタンの矢印アイコンとか）はこれでよい。

background-image: url("sample.png");

あらまし

まず前提として、Railsで背景画像を表示したいとき以下のSCSS・CSSでは表示されない。

background-image: url("sample.png");

この解決方法はググるとすぐ出てくる。

background-image: image-url("sample.png");

こう！！
Railsの構築なんかイチからやることないからすぐ忘れるけど。
これで画像のパスは試行錯誤する（webpackerとか使ってると入れる場所がかわるから）。

でも疑似要素の背景画像で使っている場合、これだと表示されない。

.button-icon::before {
  position: absolute;
  display: inline-block;
  width: 1em;
  height: 1em;
  background: image-url("arrow.png") no-repeat;
  background-size: contain;
  content: "";
}

ややこしいけど、image-urlじゃなくて普通にurlでいいっぽい。ちなみにこのCSSは適当に書いたので、これでアイコンが表示されるかはわからん。

まとめ

矢印アイコンくらいならFontAwesomeとかでだしたい。