Шрифт офигенно заполняет только четверть иконки

Question

Я создаю систему обзора звезд и хочу использовать шрифт для отображения звезд.Однако трудность, с которой я сталкиваюсь, заключается в том, что моя маркетинговая команда хочет, чтобы звезды могли отображать заполненные 1/10 приращения.Есть ли способ достичь этого?

Я нашел что-то вроде этого: CodePen

Однако это только наложение полувзвезды.Есть ли способ:

-webkit-text-fill: 1px black;

Answer 1

Вот jsfiddle, который демонстрирует заполнение звезды FontAwesome, используя проценты: https://jsfiddle.net/vco9r2rt/3/

<!-- html -->
<span class="star fa fa-star"></span>

/* css */
.star {
  display: inline-block;
  position: relative;
  font-size: 100px;
  color: #ddd;
}

.star:after {
  font-family: FontAwesome;
  content: "\f005";
  position: absolute;
  left: 0;
  top: 0;
  width: 60%;
  overflow: hidden;
  color: #f80;
}