很棒的字体仅填充图标的四分之一

Question

我正在创建一个星评系统，并希望使用超棒的字体显示星。但是，我遇到的困难是我的营销团队希望明星们能够以1/10的增量进行展示。有没有办法做到这一点？

我发现了以下内容：CodePen

但是，这只是覆盖半颗星。有没有办法：

-webkit-text-fill: 1px black;

Answer 1

下面是一个jsfiddle，它演示了如何使用百分比填充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;
}