くまだどうも、くまだです。
ランキング系のコンテンツで、☆評価のコーディングについて。
☆評価のコーディング
コードは以下になります。
<p class="p-star">
★
</p>
<p class="p-star">
★★
</p>
<p class="p-star">
★★★★
</p>.p-star {
color: #ffa200;
font-size: 24px;
position: relative;
}
.p-star:after {
position: absolute;
inset: 0;
content: "★★★★★";
color: gray;
z-index: -1;
}
グレーの星は疑似要素で作成。塗りつぶしたい星はHTMLのほうに記述します。
HTML側がもしWordPressのカスタムフィールドになっても対応できます。
今回は超短いですが、ここまで読んでくださりありがとうございました。