JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
  <li>Some text</li>
</ul>

CSS

ul {
  padding: 10px;
  background: pink;
  width: 150px;
  text-align: center;
  box-sizing: border-box;
}

li {
  list-style-type: none;
  margin-bottom: 10px;
  color: white;
}

li:before {
  content: ">";
  display: inline-block;
  margin-right: 10px;
}

li:hover {
  cursor: pointer;
  color: yellow;
}

li:hover:before {
  content: ">>";
  position: relative;
  left: 5px;
}