JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li data-step="1">1</li>
  <li data-step="2">2</li>
  <li data-step="3">3</li>
  <li data-step="4">4</li>
  <li data-step="5">5</li>
  <li data-step="6">6</li>
  <li data-step="7">7</li>
</ul>

CSS

@import "compass/css3";

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: lightblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before {
  content: '';
  position: absolute;
  top: 0.9em;
  left: -4em;
  width: 4em;
  height: 0.2em;
  background: dodgerblue;
  z-index: -1;
}

li:first-child::before {
  display: none;
}

li.active {
  background: dodgerblue;
}

/*
 .active ~ li {
	 background: lightblue;
}
 .active ~ li::before {
	 background: lightblue;
}
 body {
	 font-family: sans-serif;
	 padding: 2em;
}
*/
/*
li:hover {
  background: dodgerblue;
}
*/

JavaScript

let liArray = document.querySelectorAll("li");
liArray.forEach( (element) => 
   element.addEventListener("mouseover",
		function( event ) {   
  		doHighlights(+event.target.dataset.step);
    }
));

function doHighlights(inStep) {
   let liArray = document.querySelectorAll("li");
   console.log(inStep);
   liArray.forEach( (element) => {
      console.log(+element.dataset.step, inStep);
   		if (+element.dataset.step <= inStep) {
      	element.classList.add("active");
      } else {
         element.classList.remove("active");
      }
   })
}