基于星级的评级并不能填满整个明星

Question

我已经实施了星级评分，其中包含十进制值。问题是，你可以在附图上看到黄色没有填满它下面的整个星星，背景显示。

＆＃13;

＆＃13;

.star-ratings {
  float:left;
  display:block;
  unicode-bidi: bidi-override;
  color: pink;
  font-size: 40px;
  height: 50px;
  position: relative;
  padding:0;
}
.star-ratings .star-ratings-top {
  color: gold;
  padding: 0;
  position: absolute;
  z-index: 0.5;
  display: block;
  left: 0px;
  overflow: hidden;
}
.star-ratings .star-ratings-bottom {
  z-index: 0;
}

＆＃13;

<div class="star-ratings">
  <div class="star-ratings-top" id="star-ratings-top1"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
  <div class="star-ratings-bottom"><span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span></div>
</div>

＆＃13;

＆＃13;

＆＃13;

有没有人看到造型的错误是什么让星星完全被填满？

非常感谢你！

The stars screenshot