:before :after 요소에 :hover 속성 추가하기

:before 에 있는 콘텐츠에 :hover 속성을 주고 싶으니까 당연히 a:before::hover 하면 될 꺼 같은데 안먹힌다.

해결법은 이유는 모르겠지만 오히려 반대로 하면 됨, a:hover::before 끝. 영어라서 그런가?

그리고 중복 속성을 할 때에는 처음꺼에 : 한개쓰고 그다음에 두개 :: 하는게 더 좋은 문법이라고 하니 그냥 그렇게 ㄱ (이런거 지키면 폐기된 IE 같은거에서도 잘보이고 그럼, 웹표준 같은거)

↓ 예제 코드

<div class="ex_div">
 <a href="/">홈으로 링크:before 블록의 백그라운드 색을 호버시 변경</a>
</div>

<style>
.ex_div a::before{content:"";width:100px;height:100px;display:block;background-color:#fff;}
.ex_div a:hover::before{background-color:red;}
</style>

↓ 예제 구현


:hover 가 되니까 당연히 :link :visited :active 같은것도 되겠지 ㄱ