overflow:hidden사용해야 없어지는 이유

<div class="container">
    <ul class="navi">
      <li><a href="#none" data-text="ABOUT">ABOUT</a></li>
      <li><a href="#none" data-text="INSTRUCTOR">INSTRUCTOR</a></li>
      <li><a href="#none" data-text="CLASS">CLASS</a></li>
      <li><a href="#none" data-text="LOCATION">LOCATION</a></li>
    </ul>
  </div>

.navi li a{
  font-size: 4em;
  text-decoration: none;
  color:#fff;
  position:relative;
}
.navi li a:before{
  content : attr(data-text);
  position: absolute;
  color:yellowgreen;
  top:0;
  left:0;
  width:0;
  overflow:hidden;
}

위의 코드에서 왜 overflow:hidden을 주어야 비포에 width가 적용되는지 궁금합니다.

overflow:hidden을 주지않고 position:absolute만 있을때 absolute는 요소를 inline block으로 바뀐다고 알고 있는데 F12개발자도구에서는

before가 inline요소라고 나오는 이유도 궁금합니다.

제 독학길에 한줄기 빛이신 선생님 항상 감사합니다~!