button C19
<div class="c19"> ::before "가상요소사용" ::after </div>
1. 왜 글씨만 보이고 div 배경색은 가려지나요?
자식 before, after들은 width, height가 모두 100%이기 때문에 부모 너비만큼 꽉차게 됩니다.
이때 자식 요소가 배경색을 가지면 자식의 배경색이 보이게 됩니다.
2. z-index 1, -1이 아닌 1, 0으로 하면 글씨가 왜 안 보이나요?
우선 div.c19 구조를 보면 이렇게 되어있어요.
<div class="c19"> ::before "가상요소사용" ::after </div>
여기서 "가상요소사용" 텍스트도 .c19의 자식요소입니다.
코드에서는 c19에 hover를 했을 때 before와 after에게만 z-index -1을 부여하고, 또 다른 자식인 텍스트에게는 z-index를 따로 부여하지 않아요.
Z-index를 지정하지 않을 경우는 0과 같습니다. 그래서 형제끼리 보았을 때는 텍스트가 가장 위에 있기 때문에 텍스트가 보이게 됩니다.
하지만 before와 after에게 0을 줘버리면 텍스트와 동일한 위치에 있게 됩니다. 이때는 before, 텍스트, after 순서대로 쌓이는데 after가 absolute 속성이 있기 때문에 텍스트를 덮어버리면서 글씨가 보이지 않게 되는 것이에요.
추가설명
.c19:hover { color: tomato; z-index: 1; }
여기에 부여한 z-index는 부모인 .c19 자체에 z-index를 준 것이기 때문에 자식 요소와 함께 움직인다고 생각하면 됩니다.
부모의 z-index가 우선이기 때문에 부모 기준으로 자식들은 형제들끼리의 우선 순위만 비교합니다. 그래서 z-index: 1; 이 부분을 지워도 같은 결과가 나올거에요!