伪元素过渡后的水平Li元素

Question

我有一个水平菜单，伪元素后面有一个向右箭头。 之后在悬停时有一个过渡。 问题是如果我悬停在兄弟元素上也会移动。

.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;
      transition: margin-left 0.1s ease-out;
    }
   &:hover {
      &::after {
        margin-left: 10px;
      }
   }
  }
}

我的问题：如何阻止同级元素运动？

注意：菜单项的内容来自CMS，所以我无法设置宽度

Answer 1

通过使用位置属性(在我们的例子中，我们使用位置：绝对(，我们从正常的文档流中取出了元素('>'(，所以这个元素不会影响正常文档流中的任何内容(在我们的例子中是兄弟姐妹的(。

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