<div class="stars" style="--n:5;--d:300px">
  <input type="radio" name="rating2" id="r0" value="0" checked/>
  <label for="r0">0</label>
  <input type="radio" name="rating2" id="r1" value="1" />
  <label for="r1">1</label>
  <input type="radio" name="rating2" id="r2" value="2" />
  <label for="r2">2</label>
  <input type="radio" name="rating2" id="r3" value="3" />
  <label for="r3">3</label>
  <input type="radio" name="rating2" id="r4" value="4" />
  <label for="r4">4</label>
  <input type="radio" name="rating2" id="r5" value="5" />
  <label for="r5">5</label>
  <i></i>
</div>

.stars {
  display:inline-grid;
  width: var(--d);
  height:var(--d); 
}
.stars input,
.stars i {
  grid-area:1/1;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 56%, 79% 91%, 50% 70%, 21% 91%, 32% 56%, 2% 35%, 39% 35%);
}

.stars input {
  height:100%;
  width:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}

.stars i {
  display:grid;
  pointer-events:none;
  background:#ccc;
}

.stars i:before {
  content:"";
  grid-area:1/1;
  clip-path:inherit;
  background:gold;
  transform:scale(calc(var(--s,0)/var(--n)));
  transition:0.5s;
}
.stars i:after {
  content:counter(num);
  grid-area:1/1;
  z-index:3;
  margin:auto;
  counter-reset:num var(--s);
  font-family:monospace;
  font-style:normal;
  font-weight:bold;
  font-size:calc(17px + 8px*var(--s));
  transition:0.3s;
}

.stars:focus-within {
  filter:drop-shadow(0 0 3px #0005);
}

input:nth-of-type(1):checked ~ i {--s:0}
input:nth-of-type(2):checked ~ i {--s:1}
input:nth-of-type(3):checked ~ i {--s:2}
input:nth-of-type(4):checked ~ i {--s:3}
input:nth-of-type(5):checked ~ i {--s:4}
input:nth-of-type(6):checked ~ i {--s:5}
input:nth-of-type(7):checked ~ i {--s:6}
input:nth-of-type(8):checked ~ i {--s:7}
input:nth-of-type(9):checked ~ i {--s:8}
input:nth-of-type(10):checked ~ i {--s:9}
input:nth-of-type(11):checked ~ i {--s:10}

input:first-of-type {z-index:1}
input:checked + * + input {z-index:2}
input:last-of-type:checked + * + i:after {color:red}

body {
  text-align:center;
}

label{
  position: absolute !important;
  height: 1px; 
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px); 
  clip-path: inset(50%); 
  white-space: nowrap;
}