为什么 ::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>

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