セレクタ::before { プロパティ: 値; }
セレクタ::after { プロパティ: 値; }
要素の直前(::before)または直後(::after)へのコンテンツの挿入を指定します。
実際に挿入するコンテンツは、content プロパティで指定します。
使用例(HTML)
<div class="pelement3">
<p>サンプル1</p>
<p>サンプル2</p>
<p>サンプル3</p>
<p>サンプル4</p>
<p>サンプル5</p>
</div>
使用例(CSS)
.pelement3 p::before {
content: "◆";
padding-right: 5px;
color: skyblue;
}
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5
使用例(HTML)
<div class="pelement4">
<p>サンプル1</p>
<p>サンプル2</p>
<p>サンプル3</p>
<p class="new">サンプル4</p>
<p class="new">サンプル5</p>
</div>
使用例(CSS)
.pelement4 p.new::after {
content: "New";
padding: 0 5px;
margin-left: 10px;
font-size: 0.9em;
color: white;
vertical-align: top;
background: red;
border-radius: 5px;
}
サンプル1
サンプル2
サンプル3
サンプル4
サンプル5