<svg xmlns="http://www.w3.org/2000/svg" display="none">
  <symbol id="star" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
  </symbol>
</svg>

<div class="star-rating">
  <svg class="star" width="24" height="24"><use href="#star"></use></svg>
  <svg class="star" width="24" height="24"><use href="#star"></use></svg>
  <svg class="star" width="24" height="24"><use href="#star"></use></svg>
  <svg class="star" width="24" height="24"><use href="#star"></use></svg>
  <svg class="star" width="24" height="24"><use href="#star"></use></svg>
</div>

.star-rating {
  white-space: nowrap;
  font-size: 0;
}

.star {
  padding: 0 5px;
  vertical-align: middle;
  fill: transparent;
  stroke: red;
  stroke-width: 2px;
}

.star-rating:hover .star {
  fill: red;
  transition: fill 0.5s;
  cursor: pointer;
}

.star-rating:hover .star:hover ~ .star {
  fill: transparent;
}