Font awesome fill only a quarter of an icon

I am creating a star review system and want to use font awesome to display the stars. However the difficulty im running into is my marketing team wants the stars to be able to display filled in 1/10th increments. Is there a way to achieve this?

I have found something like this: CodePen

However this is just overlaying the half star. Is there a way to:

-webkit-text-fill: 1px black;

Here's a jsfiddle that demonstrates filling in a FontAwesome star using percentages: 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;
}