: vs ::
:after : CSS2
::after : CSS3
CSS2에서는 세미콜론(;) 하나
CSS3에서는 세미콜론(;;) 둘
CSS3에서 세미콜론이 두 개 붙어서 ::after 로 표기되는 이유는
가상 클래스와 가상 요소의 차이를 분명하게 하기 위함
과거 W3C 명세에서는 구별을 두지 않았다는 이유로 대부분의 브라우저가 세미콜론(;)의 개수와 관계없이 모두 지원
CSS3에서도 :before :after 호환 가능
pseudo-class & pseudo-element
| 가상 클래스
👉🏻 기존에 존재하는 요소를 선택
👉🏻 특정 상태일 때 스타일을 적용
:first-child :last-child :nth-child(n)
:first-of-type :last-of-type :nth-of-type(n)
:hover :active :focus :visited 등등..
| 가상 요소
👉🏻 기존에 존재하지 않는 가상의 요소를 만들어서 선택
👉🏻 특정 상태가 아니더라도 스타일을 적용 가능
::after ::before ::first-line ::first-letter ::selection ::placeholder 등등..
가상 클래스와 가상 요소를 혼동하지 않는다면 호환성에 좋은 :before :after 사용을 추천
근데 나는 클래스와 요소를 구분하는 게 좋은듯
