JSFiddle - React, Tailwind, and code Playground

by Evan Morrison

HTML

<ul>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
  <li onmouseover="changeImage()"><a href="#">Item</a></li>
</ul>

CSS

a:link {
  color:#333;
  text-decoration:none;
}

a:hover{
  color: #0078F9;
}

li{
  display:block;
  clear:both;
}

li:hover:before {
    color: #0078F9;
}


li:nth-child(1) a:before, li:nth-child(2) a:before, li:nth-child(3) a:before, li:nth-child(4) a:before, li:nth-child(5) a:before{
        display:inline-block;
		content: ">>>>>";
		padding-right:7px;
}

li:nth-child(6) a:before, li:nth-child(7) a:before, li:nth-child(8) a:before, li:nth-child(9) a:before, li:nth-child(10) a:before{
        display:inline-block;
		content: ">>>>>>>>>>";
		padding-right:7px;
}