css - Set color for half of the star

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65713385/set-color-for-half-of-the-star

Answer 1

body {
  font-size: 60px;
}


.half {
  display: inline-flex;
}

  .half > div:first-child {
  overflow: hidden;
  width: 27px;
  z-index: 1;
  color: #f97d00;
}   
  .half > div:last-child {
  position: relative;
  margin-left:-27px;
}
 <span class='half'><div>★</div><div>★</div>