Question

我有用于评论星星的代码：

<p>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star "></span>
    123 reviews of clientes
</p>

<style type="text/css">
  .checked {
    color: red;
  }
</style>

问题在于它只显示整个星星。而我也需要小数，或者至少一半。

我尝试过

.checked_half {
  width: 50%;
}

那没有用。

我该怎么做？我要一个简单的解决方案。它是静态的，不是动态的，不需要javascript。

Answer 1

您在这里使用的字体非常棒icon for a 'half-star'。

您可以简单地将类fa-star替换为fa-star-half-o，并使用它来更改CSS中的颜色，如下所示：

.fa-star {
  color: red;
}

.fa-star-half-o {
  color: black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star checked"></span>
  <span class="fa fa-star-half-o"></span> 123 reviews of clientes
</p>

如何增加在星评中显示小数部分的功能？

1 个答案: