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