인프런 커뮤니티 질문&답변
작성한 질문수
before
작성
·
147
1
안녕하세요 질문드립니다.
저는 span 을 추가해서 제작을 하였는데요
드롭다운 네비게이션으로 위에는 애니메이션 바를 구현하고 드롭다운 네비게이션으로 이동할때도 애니메이션 바를 100% 그대로 있게 하고 싶은데 어떻게 하는지 알 수 있을까요?
.gnb li a span:hover:before {
width: 100%; }
.gnb li a span:active:before {
width:100%;
}
.gnb li a.active .gnb li a span:before {
width: 100%;}
이렇게 둘다 해도 안되더라구요 ㅠㅠ 도와주시면 너무 감사드립니다
답변 1
0
코딩웍스(Coding Works)
지식공유자
저는 before를 a에 주었는데 span에다 before를 주셨으면 아래 코드처럼 해보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Before with Active Class</title>
<style>
.gnb a.active span:before,
.gnb li a span:before {
width: 100%;
}
</style>
</head>
<body>
<ul class="gnb">
<li><a class="active" href="#none"><span>Menu 01</span></a></li>
<li><a href="#none"><span>Menu 02</span></a></li>
<li><a href="#none"><span>Menu 03</span></a></li>
<li><a href="#none"><span>Menu 04</span></a></li>
</ul>
</body>
</html>