パーツ番号 09-11-02 ・ CSSのみ

数値+星併記の評価表示

数値スコアと星アイコンを並べて表示し、評価の精度をわかりやすく伝える。商品一覧の評価欄に向く。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <span class="score">4.5</span>
          <div class="stars" aria-label="4.5">
            <span class="on">★</span><span class="on">★</span><span class="on">★</span><span class="on">★</span><span class="half">★</span>
          </div>
        </div>

CSS

.d09-11-02 .wrap{ display:flex; align-items:center; gap:12px; }
        .d09-11-02 .score{ font-size:30px; font-weight:800; color:#222; }
        .d09-11-02 .stars{ font-size:22px; letter-spacing:2px; color:#e2e5ea; position:relative; }
        .d09-11-02 .stars .on{ color:#f5a623; }
        .d09-11-02 .stars .half{ position:relative; display:inline-block; color:#e2e5ea; }
        .d09-11-02 .stars .half::before{ content:"★"; position:absolute; left:0; top:0; width:50%; overflow:hidden; color:#f5a623; }

クラス名 .d09-11-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。