.navi li a:before요소에 overflow :hidden 을 넣어야지만
before요소가 감춰지게 되는데 이 원리(?)가
이해가 되질 않습니다...&nbsp;
before는 a에 absolute된 상태로 top:0 , left:0 에서
width 값만 없는 상태로 있는건데 overflow:hidden이 되면
position: relative로 되어있는 a가 더 상위(?)로
올라오게 되는 개념인가요?&nbsp;

a:before가 호버 전에 width: 0 입니다. 그럼 width는 0 이지만 그 안에 있는 내용은 여전히 보이고 있습니다. 그래서 overflow: hidden을 주면 width: 0인 만큼 나머지는 히든되어 있습니다.
a:before의 width가 늘어나면서 넘친 부분이 적어지면서 넘치지 않은 부분이 색이 칠해지는 효과가 납니다.
a는 부모요소니까 relative, a:before는 자식요소이니까 absolute입니다. 이런 경우는 z-index로 a:before를 높여줄 필요는 없는 듯 합니다.

인프런 커뮤니티 질문&답변

10:51에 질문있습니다.