JSFiddle - React, Tailwind, and code Playground

by AaronLayton

HTML

<p>
    sdfsdfsdf
<ul class="starRating">
    <li class="star3" title="Currently 3/5 Stars">Currently 3/5 Stars</li>
    <li><a href="#" class="rate1" title="Rate as 1 star"></a></li>
    <li><a href="#" class="rate2" title="Rate as 2 star"></a></li>
    <li><a href="#" class="rate3" title="Rate as 3 star"></a></li>
    <li><a href="#" class="rate4" title="Rate as 4 star"></a></li>
    <li><a href="#" class="rate5" title="Rate as 5 star"></a></li>
</ul>sdfsdfsd
<!-- hoverStar -->
<ul class="starRating hoverStar">
    <li class="star3" title="Currently 3/5 Stars">Currently 3/5 Stars</li>
    <li><a href="#" class="rate1" title="Rate as 1 star"></a></li>
    <li><a href="#" class="rate2" title="Rate as 2 star"></a></li>
    <li><a href="#" class="rate3" title="Rate as 3 star"></a></li>
    <li><a href="#" class="rate4" title="Rate as 4 star"></a></li>
    <li><a href="#" class="rate5" title="Rate as 5 star"></a></li>
</ul>sfsdfsd
</p>

CSS

body {padding:100px;text-align:center;}

.starRating {
    background:url(http://www.lakelandleather.co.uk/img/static/productpage/star-rating.png) 0 0 repeat-x;
    display:inline-block;
    height:20px;
    line-height:20px;
    position:relative;
    vertical-align:top;
    width:100px;
}
.starRating li {
    font-size:0;
    line-height:20px;
}
.starRating a {
    display:block;
    height:20px;
    left:0;
    position:absolute;
    top:0;
}
.starRating a:hover {
    background:url(http://www.lakelandleather.co.uk/img/static/productpage/star-rating.png) 0 -40px repeat-x;
}
.starRating li:first-child {
    background:url(http://www.lakelandleather.co.uk/img/static/productpage/star-rating.png) 0 -20px repeat-x;
    text-indent:-999em;
}

.starRating.hoverStar:hover li:first-child { display:none; }

.starRating.hoverStar .rate1 { width:20%;z-index:5 }
.starRating.hoverStar .rate2 { width:40%;z-index:4 }
.starRating.hoverStar .rate3 { width:60%;z-index:3 }
.starRating.hoverStar .rate4 { width:80%;z-index:2 }
.starRating.hoverStar .rate5 { width:100%;z-index:1 }

.starRating .star1 { width:20%; }
.starRating .star2 { width:30%; }
.starRating .star3 { width:60%; }
.starRating .star4 { width:80%; }
.starRating .star5 { width:100%; }