html - Half star rating with empty stars and radio buttons

Question

Is it possible to achieve this with radio button labels and font awesome icons? half star rating style I need

The most that I have managed to do is this, using two font awesome icons as radio button labels but I don't want unselected areas to be grey, rather empty star with border just like in the image above: half star rating that I got

Here is my code:

.rate{
  display: inline-block;
  border: 0;
  color: #b0afaf;
}
  
.rate > input{
  display: none;
}

.rate > label {
  float: right;
 }  

.rate > label:before {
  display: inline-block;
  font-size: 1.1rem;
  padding: .3rem .2rem;
  margin: 0;
  cursor: pointer;
  font-family: FontAwesome;
  content: "f005 ";
 }
  
.rate .half:before {
  content: "f089 ";
  position: absolute;
  padding-right: 0;
 }
    
input:checked ~ label,
label:hover, label:hover ~ label {
  color: #dbc00b;
}

input:checked + label:hover, input:checked ~ label:hover,
input:checked ~ label:hover ~ label,
label:hover ~ input:checked ~ label {
  color: #f2ec35;
}
  

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="rate">
  <input type="radio" id="star5" name="rating" value="5" />
  <label for="star5" title="Awesome"></label>
  <input type="radio" id="star4.5" name="rating" value="4.5" />
  <label for="star4.5" class="half"></label>
  <input type="radio" id="star4" name="rating" value="4" />
  <label for="star4"></label>
  <input type="radio" id="star3.5" name="rating" value="3.5" />
  <label for="star3.5" class="half"></label>
  <input type="radio" id="star3" name="rating" value="3" />
  <label for="star3"></label>
  <input type="radio" id="star2.5" name="rating" value="2.5" />
  <label for="star2.5" class="half"></label>
  <input type="radio" id="star2" name="rating" value="2" />
  <label for="star2"></label>
  <input type="radio" id="star1.5" name="rating" value="1.5" />
  <label for="star1.5" class="half"></label>
  <input type="radio" id="star1" name="rating" value="1" />
  <label for="star1"></label>
  <input type="radio" id="star0.5" name="rating" value="0.5" />
  <label for="star0.5" class="half"></label>
</div>

question from:https://stackoverflow.com/questions/65951513/half-star-rating-with-empty-stars-and-radio-buttons

Answer 1

Waitting for answers