hover after arrow transition

by momenelkamri

HTML

<ul>
<li>item 1</li>
<li> item 2</li>
<li> item 3</li>
</ul>

SCSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    float: left;
    padding: 20px;

   &::after {
      content: " > ";
      width: 35px;
      height: 35px;
      display: inline-block;
      // transform: translate(10px);
      transition: transform 0.1s ease-out;
    }

   &:hover {
      cursor: pointer;
      &::after {
        transform: translate(20px);
      }
   }
 }
}