• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

10:51에 질문있습니다.

20.09.04 23:00 작성 조회수 75

1

.navi li a:before요소에 overflow :hidden 을 넣어야지만

before요소가 감춰지게 되는데 이 원리(?)가

이해가 되질 않습니다... 

before는 a에 absolute된 상태로 top:0 , left:0 에서

width 값만 없는 상태로 있는건데 overflow:hidden이 되면

position: relative로 되어있는 a가 더 상위(?)로

올라오게 되는 개념인가요? 

답변 2

·

답변을 작성해보세요.

3

a:before가 호버 전에 width: 0 입니다. 그럼 width는 0 이지만 그 안에 있는 내용은 여전히 보이고 있습니다.
그래서 overflow: hidden을 주면 width: 0인 만큼 나머지는 히든되어 있습니다.

a:before의 width가 늘어나면서 넘친 부분이 적어지면서 넘치지 않은 부분이 색이 칠해지는 효과가 납니다.

a는 부모요소니까 relative, a:before는 자식요소이니까 absolute입니다.
이런 경우는 z-index로 a:before를 높여줄 필요는 없는 듯 합니다.

0

손손님의 프로필

손손

질문자

2020.09.07

답변  감사합니다 ^^!