[CSS] :before vs ::before

CSS의 가상 요소인 ::before나 ::after를 사용할 때 헷갈리거나 한 번쯤 하는 생각 중 하나가 바로 콜론의 갯수 여부이죠. 하나를 쓸 것이냐, 두 개를 쓸 것이냐?

:before를 쓰는 사람들은 보통 얘기합니다.

1. : 를 하나 덜 써도 되는데
2. i.e 8 이하 브라우저에서 지원도 가능하고,
3. 어차피 모든 브라우저가 :before를 지원한다.

땡. 문법상 틀렸습니다.

뭐가 어떻게 틀렸다는 걸까요? CSS에서 : 콜론(colon)과 :: 더블콜론(double-colon)의 차이점은 무엇일까요?

CSS에서의 콜론 — 의사 클래스

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있는 것 처럼요. (설명은 MDN을 참조해주세요.)

이러한 의사 클래스에게 : 콜론이 사용됩니다. 대표적으로 :hover, :active, :checked 와 같은 클래스들이 있죠.

CSS에서의 더블콜론 — 의사 요소

의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 ::first-line을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다. (MDN 설명 첨부합니다.)

그리고 이런 의사 요소들에게 :: 더블 콜론이 사용됩니다. ::before, ::after 역시 의사 요소에 포함이 됩니다.

의사 클래스와 의사 요소의 차이점

그렇다면 둘에게는 무엇이 차이가 있을까요? 의사 요소는 특정 부분의 스타일을 적용할 때 사용합니다. 의사 클래스는, 특정 상태에 스타일을 적용할 때 사용하고요. 예를 들면 :hover는 의사 클래스로서 포인터가 올라간 ‘상태’ 일 때만 스타일이 적용되는 것이죠.

과거 W3C 명세에선 의사 클래스와 의사 요소의 구별을 두지 않았습니다. 그래서 지금 대부분의 브라우저가 :before를 사용해도 지원을 하는 것입니다만, ::before는 의사 요소이기 때문에 더블 콜론을 사용하는 것이 문법적으로는 옳습니다.