Flex Stars

by James Hooper

HTML

<script src="https://use.fontawesome.com/3c4bb53f16.js"></script>
<h1>
  Stars Stars Stars
</h1>
<p>
  If you change the css class after "stars_colour" to any number from 0 up until the value of 5 the stars will automatically change to that star rating.... Fancy huh!
</p>

<div class="stars_wrap">
	<div class="stars_grey">
		<i class="fa fa-star grey" aria-hidden="true"></i>
		<i class="fa fa-star grey" aria-hidden="true"></i>
		<i class="fa fa-star grey" aria-hidden="true"></i>
		<i class="fa fa-star grey" aria-hidden="true"></i>
		<i class="fa fa-star grey" aria-hidden="true"></i>
	</div>
	<div class="stars_colour four_six">
		<i class="fa fa-star colour" aria-hidden="true"></i>
		<i class="fa fa-star colour" aria-hidden="true"></i>
		<i class="fa fa-star colour" aria-hidden="true"></i>
		<i class="fa fa-star colour" aria-hidden="true"></i>
		<i class="fa fa-star colour" aria-hidden="true"></i>
	</div>
</div>

CSS

.fa.fa-star {
  font-size:30px;
}

.stars_wrap {
  position:relative;
  width:auto;
  width: 140px;
    height: 30px;
}

.stars_grey, .stars_colour {
  position:absolute;
  height:30px;
  display:flex;
}

.stars_colour {
  overflow:hidden;
}

.fa.fa-star.grey {
  color:grey;
}

.fa.fa-star.colour {
  color:red;
}

.stars_colour.zero_one {
  width:2%;
}

.stars_colour.zero_two {
  width:4%;
}

.stars_colour.zero_three {
  width:6%;
}

.stars_colour.zero_four {
  width:8%;
}

.stars_colour.zero_five {
  width:10%;
}

.stars_colour.zero_six {
  width:12%;
}

.stars_colour.zero_seven {
  width:14%;
}

.stars_colour.zero_eight {
  width:16%;
}

.stars_colour.zero_nine {
  width:18%;
}

.stars_colour.one_zero {
  width:20%;
}

.stars_colour.one_one {
  width:22%;
}

.stars_colour.one_two {
  width:24%;
}

.stars_colour.one_three {
  width:26%;
}

.stars_colour.one_four {
  width:28%;
}

.stars_colour.one_five {
  width:30%;
}

.stars_colour.one_six {
  width:32%;
}

.stars_colour.one_seven {
  width:34%;
}

.stars_colour.one_eight {
  width:36%;
}

.stars_colour.one_nine {
  width:38%;
}

.stars_colour.two_zero {
  width:40%;
}

.stars_colour.two_one {
  width:42%;
}

.stars_colour.two_two {
  width:44%;
}

.stars_colour.two_three {
  width:46%;
}

.stars_colour.two_four {
  width:48%;
}

.stars_colour.two_five {
  width:50%;
}

.stars_colour.two_six {
  width:52%;
}

.stars_colour.two_seven {
  width:54%;
}

.stars_colour.two_eight {
  width:56%;
}

.stars_colour.two_nine {
  width:58%;
}

.stars_colour.three_zero {
  width:60%;
}

.stars_colour.three_one {
  width:62%;
}

.stars_colour.three_two {
  width:64%;
}

.stars_colour.three_three {
  width:66%;
}

.stars_colour.three_four {
  width:68%;
}

.stars_colour.three_five {
  width:70%;
}

.stars_colour.three_six {
  width:72%;
}

.stars_colour.three_seven {
  width:74%;
}

.stars_colour.three_eight {
  width:76%;
}

.stars_colour.three_nine {
  width:78%;
}

.stars_colour.four_zero {
 ...