伪元素转换后的水平 li 元素

问题描述

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

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

<li>项目 1</li><li>第2项<li>第 3 项

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

我的问题:如何停止兄弟元素移动?

my question: how to stop the sibling element movement?

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

NB: The content of the menu item come from CMS so i can't set a width

推荐答案

通过使用 position 属性(在我们的例子中我们使用 position: absolute)我们从正常的文档流中取出元素('>')，所以这个元素不会影响正常文档流中的任何内容(在我们的例子中是同级 li 的).

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

这篇关于伪元素转换后的水平 li 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！