작성
·
374
1
<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요소라고 나오는 이유도 궁금합니다.
제 독학길에 한줄기 빛이신 선생님 항상 감사합니다~!
답변 1
1
:before의 길이가 0~100%로 길어지는 동안 보이고 있는 부분을 가려주기 위해서 overflow:hidden 줍니다.
그래야 글자가 채워지는 효과를 낼 수 있습니다.
:before :after가 inline요소라고 나오는 이유는 없습니다. 그렇게 가상클래스 :before :after 태생이 정해져 있는 것 입니다.