Javascript 为什么：：before伪元素出现在移动菜单的顶部？

我有一个菜单，它有一个png img，如

：：在

伪元素之前，它不是贴在菜单项旁边，而是放在上面。

const菜单按钮=$（'img'）；
const menu_nav=$（'myNav'）；
菜单\按钮。单击（函数（）{
菜单导航切换类（“菜单打开”）
});
.overlay{
身高：0%；
宽度：100%；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#d6cece；
溢出y：自动；
过渡：0.5s；
}
.覆盖内容{
位置：相对位置；
排名前10%；
宽度：100%；
边缘顶部：50px；
}
.覆盖{
左侧填充：30px；
垫底：5px；
垫面：5px；
文字装饰：无；
字体大小：27px；
显示：块；
过渡：0.3s；
字体：斜体；
颜色：黑色；
}
.覆盖内容a：之前{
宽度：6px；
内容：“；
背景图片：url(https://picsum.photos/5);
背景重复：无重复；
位置：绝对位置；
左：18px；
顶部：18px；
高度：20px；
}
.菜单打开{
身高：100%；
}
可能是这样的

.overlay-content > a:before { 
    content: "";
    display: block;
    background: url("https://picsum.photos/5") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

然后把这个改成

.overlay-content a:before {
  width: 6px;
  content: " ";
  background-image: url(https://picsum.photos/5);
  background-repeat: no-repeat;
  position: absolute;
  left: 18px;
  top: 18px;
  height: 20px;
}

元素处于“顶部”，因为您将所有元素的
top
设置为
18px

如果绝对定位的定位上下文设置正确（a元素而不是
overlay content
div），那么这不会是一个问题

应将定位上下文设置为元素本身：

.overlay a { 
  position: relative;
}

我不明白，这根本没有改变：：before的行为，它只是让菜单看起来完全不同，是否需要详细说明？我只是假设您试图将这些值仅应用于类的父类中的a标记。覆盖我将仔细查看并更新我的答案这对您有效吗？如果是的话，请确认答案不是真的，对不起。