Как динамически раскрашивать звезды в звездном рейтинге?

Вложите один элемент <span> в другой.
Внешний <span> имеет фоновое изображение из пустых звездочек.
Внутренний <span> имеет фоновое изображение закрашенной звезды, а элемент width: задается программно при макетировании. страница. Например, width:60.0% можно использовать для рейтинга 3/5 звезд.

Для небольшой оптимизации вы можете даже использовать start с изображением, состоящим только из одной звезды, и использовать repeat-x, чтобы получить все 5 звездочек. Вы также можете иметь изображение, которое включает в себя как цветные, так и заполненные звезды по вертикали, и обрезать во время отображения, чтобы определить, на какую версию звезды вы ссылаетесь.

Пример 1:

Например, рассмотрим следующий CSS:

span.rating-frame, span.rating-fill {
    background: url(../star.png) 0 -16px repeat-x;
    display: block;
    width: 80px; /* this is 5 times the width of the star, for 5 stars total */
    height: 16px;
}
span.rating-fill {
    background-position: 0 0; /* use the (filled-in) version from the top of the image */
}

и следующий HTML:

Average Rating: 4/5
<span class="rating-frame">
      <span style="width:80.0%;" class="rating-fill"> </span>
</span>

User A:  5/5
<span class="rating-frame">
      <span style="width:100.0%;" class="rating-fill"> </span>
</span>

User B: 3/5
<span class="rating-frame">
      <span style="width:60.0%;" class="rating-fill"> </span>
</span>

Предполагается, что star.png представляет собой изображение размером 16 x 32 с заполненной звездой вверху.
Значение атрибута ширины задается как userRating/maxPossibleRating, округленное до соответствующей точности. Конечно, там, где вы показываете общий средний рейтинг, он устанавливается averageUserRating/maxPossibleRating.

Пример 2:

Вместо этого OP сообщает, используя <span>☆</span>. Следующий псевдокод может быть полезен для генерации страниц.

for (i = 1 to rating inclusive) {
    print "<span>★</span>"
}
//if including a half-star, replace this comment with the code to do so.
for (i = rating+1 to maxRating inclusive) {
    print "<span>☆</span>"
}

но если у вас нет наполовину заполненного символа звезды, вы не сможете использовать его в своем выводе. Вместо этого вы можете попробовать использовать символ ½.

Пример 3:

Пример eBay OP ссылается на использование источника следующим образом:

   <span class="display-text-rating">3.7 stars</span>
   <div class="star-rating-section" title="3.7 out of 5 stars">
     <span class="star-rating" role="img" aria-label="3.7 stars">
         <i class="fullStar"></i>
         <i class="fullStar"></i>
         <i class="fullStar"></i>
         <i class="midStar"></i>
         <i class="emptyStar"></i>
      </span>
    </div>

Первая строка — это печатный текст, показывающий рейтинг в текстовой форме.
Заголовок div показывает эту информацию при наведении указателя мыши.
Элементы с атрибутами класса внутри диапазона можно легко сгенерировать программно, как в примере 2. CSS можно настроить на использование разных изображений для fullStar, midStar и emptyStar. Этот процесс генерации может быть повторен для каждого пользователя в разделе, где находятся индивидуальные рейтинги пользователей.

Недостаток примера 3 состоит в визуальном округлении до ближайшей полузвезды (а в примере 2 — до полной звезды), тогда как пример 1 позволяет более точно различать дробные звезды без необходимости дополнительного программирования или создания изображения. Решение о подходящем уровне округления — это вопрос для UX.SE (и если кому-то не терпится задать его, пожалуйста, отредактируйте по ссылке здесь).