css の疑似要素 「:before」を使って、p要素の前に画像を表示させようとしています。
content に文字列** [content: "あいう";」 **を指定すると問題なく表示させるのですが、
画像 「content: url(images/phone.png);」 を指定しても表示されません。
何が原因でしょうか。
画像はプロジェクトフォルダ内の「images」フォルダに入っています。
pngの他にsvgもありますが同様に表示されません。
htmlにimgタグで同じ画像を挿入したところ、問題無く表示できます。
###該当のソースコード
html
<div class="calltoday"> <p>CALL TODAY (123) 456-7890</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); }
質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。解決済にしても本文を編集することが出来ますので、よろしくお願いします。また、回答をきっかけに解決したのであれば、回答者にベストアンサーをつけてはいかがでしょうか。
回答2件
あなたの回答
tips
プレビュー