html - 如何为星级评论添加显示小数部分的功能？

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'在您在这里使用的 fontawesome 中。

您可以简单地将类 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>