A rating bar with pure CSS

rating_bar.css

 body {
   padding: 20px;
 }

 .container {
   display: inline-flex;
   /* or display: flex; */
   flex-direction: row-reverse;
   justify-content: flex-end;
 }

 .box {
   cursor: pointer;
   font-size: 24px;
   color: rgba(0, 0, 0, 0.1);
   text-align: center;
   line-height: 48px;
   width: 50px;
   height: 50px;
   background-color: rgba(10, 10, 240, 0.2);
   border-top: 1px solid #333;
   border-bottom: 1px solid #333;
   border-right: 1px solid rgba(0, 0, 0, 0.05);
   transition: color 0.2s ease;
   box-sizing: border-box;
 }

 .box:first-child {
   border-top-right-radius: 50%;
   border-bottom-right-radius: 50%;
   border-right: 1px solid #333;
 }

 .box:last-child {
   border-top-left-radius: 50%;
   border-bottom-left-radius: 50%;
   border-left: 1px solid #333;
 }

 .box:hover~.box {
   background-color: #8c9b26;
   /* lighter green */
   color: white;
 }

 /* .box:hover + .box, */
 /* also hightlights previous in darker green */
 .box:hover {
   background-color: #828c23;
   /* darker green */
   color: white;
 }

rating_bar.html

<!-- https://jsfiddle.net/dwms3pqv/ -->
<p>
  Hover across the bar
</p>
<div class="container">
  <div class="box">10</div>
  <div class="box">9</div>
  <div class="box">8</div>
  <div class="box">7</div>
  <div class="box">6</div>
  <div class="box">5</div>
  <div class="box">4</div>
  <div class="box">3</div>
  <div class="box">2</div>
  <div class="box">1</div>
</div>