горизонтальные элементы li после перехода псевдоэлемента

Question

У меня есть горизонтальное меню со стрелкой вправо после псевдоэлемента. После того, как есть переход при наведении. проблема в том, если я наведу курсор на элемент родного брата.

HTML

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

1008 * СКС *

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

  li {
    float: left;
    padding: 20px;

   &::after {
      content: " > ";
      width: 35px;
      height: 35px;
      transition: margin-left 0.1s ease-out;
    }

   &:hover {
      &::after {
        margin-left: 10px;
      }
   }
  }
}

мой вопрос: как остановить движение элемента родного брата?

NB. Содержимое элемента меню происходит из CMS, поэтому я не могу установить ширину

Answer 1

Используя свойство position (в нашем случае мы использовали position: absolute), мы вынули элемент ('>') из обычного потока документов, поэтому этот элемент не будет влиять на содержимое из нормального потока документов. (в нашем случае брат и сестра Ли).

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;     
      }
   }
  }
}