問題
疑似要素（before／after）に画像を表示させるには？
解決策
cssのcontentで「url(画像ファイルのパス)」を設定する。
疑似要素に画像を表示させる手法
疑似要素（before／after）に画像を表示させるには、cssのcontentで「url(画像ファイルのパス)」を設定します。
DEMOはこちら
文頭に歯車マークの画像が表示されます。
HTMLの構築
まずはHTMLを構築します。
<p class="beforetext">文頭に歯車マークの画像が表示されます。</p>CSSの構築
次にCSSを構築します。
.beforetext:before{
display: inline-block;
vertical-align: middle;
margin-right: 10px;
content: url(anchor-about.png);
}
コメント