Horizontal Li Elements After Pseudo-element Transition

I have a horizontal menu with a right arrow in after pseudo element. the after have a transition on hover. the issue is if i hover the sibling element moves also. html

&

Solution 1:

By using position property(in our case we used position: absolute) we took the element('>') out from the normal document flow, so this element won't be effecting any of the content from the normal document flow (in our case sibling li's).

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    float: left;
    padding: 20px;
    position: relative;
   &::after {
      position: absolute;
      content: " > ";
      width: 35px;
      height: 35px;
      transition: margin-left 0.1s ease-out;
    }
   &:hover {
      &::after {
        margin-left: 10px;     
      }
   }
  }
}