JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><a href="">9</a></li>
  <li><a href="">8</a></li>
  <li><a href="">7</a></li>
  <li><a href="">6</a></li>
  <li><a href="">5</a></li>
  <li><a href="">4</a></li>
  <li><a href="">3</a></li>
  <li><a href="">2</a></li>
  <li><a href="">1</a></li>
  <li><a href="">0</a></li>
</ul>

CSS

ul {
  list-style-type: none;
  transform: rotate(180deg);
  float: left;
}
li {
  display: inline-block;
  width: 30px; height: 30px;
  background: gray;
  line-height: 30px;
  text-align: center;
  transform: rotate(180deg);
}
li:hover {
  background: green;
}
li:hover ~ li {
  background: tomato;
}