javascript - 为什么::before 伪元素在移动菜单上位于顶部？

Question

我有一个菜单，它有一个 png img 作为 ::before 伪元素，它不是紧挨着菜单项，而是在顶部。

const menu_button = $('img');
const menu_nav = $('#myNav');

menu_button.click(function(){
  menu_nav.toggleClass('menu_open')
});

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #d6cece;
  overflow-y: auto;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  margin-top: 50px;
}

.overlay a {
  padding-left: 30px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-decoration: none;
  font-size: 27px;
  display: block;
  transition: 0.3s;
  font-style: italic;
  color: black;
}

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

.menu_open {
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://picsum.photos/100">

<div id="myNav" class="overlay">
  <div class="overlay-content">
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
    <a href="#">Test</a>
  </div>
</div>

为什么会有这种行为？它在没有菜单的情况下工作，但当元素垂直对齐时就不行了。请查看我快速制作的片段。

Answer 1

应该是这样的

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