css实现五角星评分

原文

原文有更多攒劲效果

效果

HTML

<div class="star-rating">
<div class="star-rating-top" style="width:50%">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="star-rating-bottom">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>

CSS

.star-rating {
    unicode-bidi: bidi-override;
    color: #ddd;
    font-size: 0;
    height: 25px;
    margin: 0 auto;
    position: relative;
    display: table;
    padding: 0;
}

.star-rating span {
    margin: 0 3px;
    font-size: 20px;
}

.star-rating span:after {
    content: "★";
}

.star-rating-top {
    color: #FFAF00;
    padding: 0;
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}

.star-rating-bottom {
    padding: 0;
    display: block;
    z-index: 0;
}