.rating {
    display: inline-block;
    font-size: 3rem;
    position: relative;
    color: white;
}

.rating::before {
    content: "★★★★★";
    color: white;
}

.rating::after {
    content: "★★★★★";
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #FFD700;
}

.rating[data-rating="0.5"]::after { width: 10%; }
.rating[data-rating="1"]::after { width: 20%; }
.rating[data-rating="1.5"]::after { width: 30%; }
.rating[data-rating="2"]::after { width: 40%; }
.rating[data-rating="2.5"]::after { width: 50%; }
.rating[data-rating="3"]::after { width: 60%; }
.rating[data-rating="3.5"]::after { width: 70%; }
.rating[data-rating="4"]::after { width: 80%; }
.rating[data-rating="4.5"]::after { width: 90%; }
.rating[data-rating="5"]::after { width: 100%; }