こんなの
html
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>sample</title> <link rel="stylesheet" href="style.css"> </head> <body> <h2>Star Rating</h2> <div class="star-rating"> <div class="star-rating-front" style="width: 50%">★★★★★</div> <div class="star-rating-back">★★★★★</div> </div> </body> </html>
css
.star-rating { position: relative; width: 5em; height: 1em; font-size: 25px; } .star-rating-front { position: absolute; top: 0; left: 0; overflow: hidden; color: #ffcc33; } .star-rating-back { color: #ccc; }