[CSS] before 또는 after 요소가 hover 일 경우에 스타일 적용하기

Intro

이런 상황을 가정 해봅시다. anchor 태그를 이용한 링크 앞에 항상 (Link) 라는 구분자를 달아 주었는데, 사용자가 해당 링크에 마우스를 가져다 대면(hover) 링크의 색깔이 바뀌도록 해두었습니다. 하지만 (Link) 라는 구분자는 hover 이벤트 발생시 다른 색을 적용하려면 어떻게 해야 할까요.

html 및 CSS 기본 구성

위 상황을 html 과 CSS 로 나타내면 아래와 같습니다.

/* html */
<a href="http://example.com" class="exp">Example</a>

/* CSS */
a.exp       { color: #d33; }
a.exp:hover     { color: #f55; }
a.exp:before    { content: '(Link)'; }

exp 라는 class 를 가진 링크는 평소 색깔이 #d33 이지만, 마우스를 가져다 대면(hover) #f55 로 바뀝니다. 구분자인 (Link) 라는 문구는 before 선택자를 이용해 exp 라는 class 를 가진 모든 앵커 태그의 앞에 붙도록 했습니다.

하지만 위와 같은 구성에서는 (Link) 라는 문구는 링크과 마찬가지로 평소에는 #d33, hover 인 경우에는 #f55 로 바뀔 것입니다. 아래에서 (Link) 라는 문구를 회색(#aaa)으로 만들고, hover 이벤트가 발생 했을 때, 조금 밝은 회색(#ccc)이 되도록 만들어 봅시다.

before 선택자에 색 지정

before 선택자에 색을 지정하는 방법은 아래와 같이 간단합니다.

a.exp:before    { content: '(Link)'; color: #aaa; }

보통의 요소에 색을 지정하듯이 color 속성에 값을 넣어주면 됩니다.

before 선택자가 hover 이벤트 일때 색지정

문제는 before 선택자가 hover 이벤트 일때 어떻게 색을 지정하는가 입니다. 저는 아주 단순하게 생각하고 아래와 같이 잘못된 방법으로 생각했습니다. 당연히 작동하지 않습니다.

/* 잘못된 사용방법 */
a.exp:before:hover  { color: #ccc; }

뭐가 잘 못 되었을까를 생각해보다가 아래와 같이 작성해야 함을 알 수 있었습니다.

/* 올바른 방법 */
a.exp:hover:before  { color: #ccc; }

생각해보단 아주 당연한 것이지만, 처음에는 무엇이 잘 못 되었을까 한참을 고민했네요. 부모요소에 hover 이벤트 발생시 before 에 특정 스타일을 적용하라고 해석 할 수 있겠네요.

자주 혼동하는 개념이라 기록으로 남겨 봅니다.