REDLINE MAGAZINE

このページは　E::before (:before擬似要素)　のサンプルページです。

p要素の前に「Note:」という文字列を挿入しその部分に背景色をつける例。

p要素の前にアイコンを挿入する例。

挿入した画像をブロックにしてテキストを下に回り込ませる例。

このサンプルのCSS

#sample1 p::before{
	content:"Note: ";
	background:#fcc; /* 背景色・ピンク */
	}
#sample2 p::before{
	content:url("hoge.png");
	}
#sample3 p::before{
	display:block;
	content:url("hoge.png");
	}

このサンプルのHTML

<div id="sample1">
<p>ここはp要素です。この要素の前に「Note:」が挿入されます。わかりやすいようにそこだけ背景色をつけています。</p>
</div>
<h3>p要素の前にアイコンを挿入する例。</h3>
<div id="sample2">
<p>ここはp要素です。この要素の前にアイコン画像が挿入されます。</p>
</div>
<div id="sample3">
<p>ここはp要素です。この要素の前にブロック化された画像が挿入されます。</p>
</div>