疑似要素 :before で画像を表示

Question

css の疑似要素 「:before」を使って、p要素の前に画像を表示させようとしています。

content に文字列** [content: "あいう";」 **を指定すると問題なく表示させるのですが、
画像 「content: url(images/phone.png);」 を指定しても表示されません。
何が原因でしょうか。

画像はプロジェクトフォルダ内の「images」フォルダに入っています。
pngの他にsvgもありますが同様に表示されません。
htmlにimgタグで同じ画像を挿入したところ、問題無く表示できます。

###該当のソースコード

html

<div class="calltoday">
<p>CALL TODAY [phone]</p>
</div>

css

.calltoday {
width: auto;
height: 1.5rem;
background-color: #2c7002;
position: relative;
}

.calltoday p {
color: #fff;
position: absolute;
right: 2rem;
}

.calltoday p:before {
content: url(images/phone.png);
}

Comments

[kei344]

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。解決済にしても本文を編集することが出来ますので、よろしくお願いします。また、回答をきっかけに解決したのであれば、回答者にベストアンサーをつけてはいかがでしょうか。

Answer 1

問題無いですけどねぇ…

右側から少し離れて表示される・画像が左にくっついて表示されるなど、
やりたいことは問題ないように思います。

.calltoday p:before {
  content:url(http://placehold.jp/16x16.png);
}

に変更してみて表示されるようであれば、パスの書き間違いってことですね。

Comments

[yuu_mmca]

ご回答ありがとうございます。
パスの書き間違いでした…。

Answer 2

パスの書き間違いでした…。

content: url(images/phone.png); ではなく、
content: url(../images/phone.png); にて表示されました。

cssファイルからの相対パス、ということで、ひとつ階層を上がらなければならなかったです。