JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

CSS

@import "compass/css3";
 li {
	 width: 2em;
	 height: 2em;
	 text-align: center;
	 line-height: 2em;
	 border-radius: 1em;
	 background: dodgerblue;
	 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:hover{
	 background: dodgerblue;
   cursor: pointer;
}
 li:hover ~ li {
	 background: lightblue;
}
 li:hover ~ li::before {
	 background: lightblue;
}
 body {
	 font-family: sans-serif;
	 padding: 2em;
}