css实现五角星评分

CSS实现五角星评分，是一种非常常见的前端实现方式。

.rating{
    unicode-bidi: bidi-override;
    direction: rtl;
}
.rating > span{
    display: inline-block;
    position: relative;
    width: 1.1em;
    font-size: 3em;
    color: #FFC107;
    cursor: pointer;
}
.rating > span:hover:before,.rating > span:hover~span:before{
    content: "\2605";
    position: absolute;
    left: 0;
    color: #FFD700;
}

以上是实现五角星评分的CSS代码，首先我们需要给外层元素添加一个类名，比如这里的.rating。接着，在实现五角星评分的容器元素中，我们需要添加多个span元素，每个span元素表示一个五角星。也就是说，如果我们想要实现一个5分评分的效果，那么就需要添加5个span元素。

接着，我们需要使用unicode-bidi属性和direction属性来控制文本流向。因为五角星是从右往左排列的，所以我们需要将这些元素的文本流向设置为从右往左。这样，五角星就可以从左往右排列。

接下来，我们需要给每个span元素添加伪元素:before，然后在:hover状态下显示，也就是当鼠标移动到某个五角星上时，这个五角星前面的所有五角星都要变成黄色，用来表示当前评分。

最后，我们还可以为每个span元素添加一个事件监听器，当鼠标点击某个五角星时，可以自动提交评分，完成五角星评分的交互功能。