問題 × 解決策

疑似要素に画像を表示させる

問題

疑似要素(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);
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

4 × 4 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧