.rating{
  position: relative;
  display: flex;
  margin: 10px 0;
  flex-direction: row-reverse ;
}
.rating input{
margin:0;
  position: relative;
  width: 20px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
  color: var(--unselclr);
}
.rating input::before{
  content: '\f005';
  font-family: fontAwesome;
  font-size: 34px;
  position: absolute;
  left: 4px;
  transition: 0.5s;
}
.rating input:nth-child(2n + 1)::before{
  right: 4px;
  left: initial;
}

.rating input:hover,{
    color: var(--ovrclr);
}

.rating input:hover ~ input::before,
.rating input:hover::before{
    color: var(--ovrclr);
    cursor:hand;
}

.rating input:checked ~ input::before,
.rating input:checked::before{
    color: var(--selclr);
}