半字体真棒心脏评级 css

Question

我正在使用 font-awesome fa-heart 类生成一个评级系统。它通过给整个心脏着色来工作得很好，但是当我尝试仅将心脏的前半部分填充为红色时，我遇到了麻烦。我一直在寻找，但总是星星，而不是半心半意，总是全心全意，而不是字体很棒。

Font Awesome 版本使用 4.0.3 并且无法更改...

有什么技巧可以做到这一点吗？

.full {
  color:red;
}
.half {

}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love ">
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart full"></span>
     <span class="fa fa-heart half"></span>  
     <a href="#reviews"><span>23 Review(s)</span></a>
                    </div>   

Answer 1

这是另一个想法，您可以通过简单地调整 CSS 变量来轻松获得任何类型的评级：

.rating-love {
  display: inline-grid!important;
}

.rating-love:before,
.rating-love:after {
  content: "\f004  \f004  \f004  \f004  \f004";
  grid-area: 1/1;
}

.rating-love:after {
  white-space: nowrap;
  overflow: hidden;
  width: var(--w);
  color: red;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">

<div class="rating-love fa" style="--w: 50%;"></div>

<br>

<div class="rating-love fa" style="--w: 30%;"></div>

<br>

<div class="rating-love fa" style="--w: 80%;"></div>