2023-04-03T13:38:29.097Z

1

늦은 시간 답변 감사드립니다 (__)

2023-04-03T11:05:01.345Z

1

답변 고맙습니다 제가 반대로 적었네요 죄송합니다 제가 아직 이해를 못해서 다시 한번 질문드리겠습니다 질문의 요지는 :before 를 적용했을때와 같이 :after적용 했을때도 text가 노출되어야 될거 같은데 :after의 경우는 다르게 동작되어서 질문드리게됐습니

z-index가 같다는 기준하에 relative가 absolute 보다 우선한다면

<a href="#none" class="btn">
        <span>View the CodingWorks Class</span>
    </a>

.btn:after {
    content: '';
    background-color: crimson;
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition:0.35s;
}

.btn span {
    position: relative;
}

.btn:hover:after {
    height: 100%;
}

span에 relative를 주면 :after 보다 우선되서 view the codingworks clss 이 text가 보여야 될거 같은데 before의 경우와 달리 text가 보이지 않아서 동작원리에 대해서 잘 이해가 가지 않는다는 질문이었습니다. 혹시 제가 놓치고 있거나 잘못 생각한 부분이 있나요 고민해보고 내용을 찾아도 잘 나오지 않아 질문드립니다 감사합니