Star Rating

by Génesis García Morilla

HTML

<i-rating>
  <i-star></i-star>
  <i-star></i-star>
  <i-star></i-star>
  <i-star></i-star>
  <i-star></i-star>
</i-rating>

CSS

/* Global variables */
:root {
  --star-size: 25vh;
  --star-color: floralwhite;
  --star-hover-color: indianred;
}


/* Generic Horizontal and Vertical center */
body {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #5e5e5e;
}


/* Star Rating */
i-rating > i-star::after {
  content: '★';
  color: var(--star-color);
  font-size: var(--star-size);
  /* Border*/
  text-shadow: 0 0 2px var(--star-hover-color);
  /* Reverse direction */
  direction: rtl;
  unicode-bidi: bidi-override;
}

i-rating > i-star:hover::after, 
i-rating > i-star:hover ~ i-star::after {
  color: var(--star-hover-color);
  cursor: pointer;
}