Five Star Ratings In HTML & CSS

HTML <!-- html code --> <div class="rating"> <input type="radio" name="rating" id="r1"> <label for="r1"></label> <input type="radio" name="rating" id="r2"> <label for="r2"></label> <input type="radio" name="rating" id="r3"> <label for="r3"></label> <input type="radio" name="rating" id="r4"> <label for="r4"></label> <input type="radio" name="rating" id="r5"> <label for="r5"></label> </div> CSS @charset "UTF-8"; .rating { margin: 190px auto; width: 400px; } .rating > * { float: right; } @-webkit-keyframes pulse { 50% { color: #5e5e5e; text-shadow: 0 0 15px #777777; } } @keyframes pulse { 50% { color: #5e5e5e; text-shadow: 0 0 15px #777777; } } .rating label { height: 40px; width: 20%; display: block; position: relative; cursor: pointer; } .rating label::after{ transition: all 0.4s ease-out; -webkit-font-smoothing:antialiased; position: absolute; content: "☆"; color: #444; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-size: 80px; -webkit-animation: 1s pulse ease; animation: 1s pulse ease; } /* add hover effect */ .rating label:hover::after{ color: #5e5e5e; text-shadow: 0 0 15px #5e5e5e; } .rating input{ display: none; } .rating input:checked + label::after, .rating input:checked ~ label::after{ content: "★"; color: #f9bf3b; text-shadow: 0 0 20px #f9bf3b; } body{ background-color: #111; } JavaScript No JavaScript