テキスト表示

■テキストを表示■

:before や :after 擬似要素を使って、要素の前後に任意のテキストを表示できます。書き方は簡単で、
擬似要素に content: “テキストの内容”; を加えればOK。テキストはシングルまたはダブルクオーテーションで囲むのを忘れずに！
以下の例では「new」というクラスのついたリストの後に「NEW!」というテキストを表示しています。テキストの装飾もできるので、
素敵にカスタマイズしちゃってください！

▲ＨＴＭＬ▲

<ul>
<li class=”new”>Runaway Jacket – $198.00</li>
<li>Breezy Tank – $48.00</li>
<li>Devi Yoga Pant – $98.00</li>
<li class=”new”>Weekend Warrior Bag – $148.00</li>
</ul>

 

▲ＣＳＳ▲
li {
margin: 10px 0;
}
.new:after {
content: “NEW!”;
font-size: .75em;
background: #FF9F80;
color: #fff;
padding: 5px 5px 3px;
margin-left: 5px;
border-radius: 3px;
}