CSS :after, :before 와 ::after, ::before 차이점

( : ) 와 ( :: ) 차이점 

: 은  CSS2에서 사용된 문법이고 :: 은 CSS3에서 사용된 문법이다.  CSS2에서는 가상 요소와 가상 클래스 모두 : 를 사용하고 CSS3에서는 가상 요소는 :: 를 사용하고 가상 클래스는 : 를 사용한다. 

 

[CSS2]

• 가상 요소 :  :after, :before 
• 가상 클래스 : :focus, :hover 

[CSS3]

• 가상 요소 :  ::after, ::before 
• 가상 클래스 : :focus, :hover 

 

CSS3에서 ::를 사용하는 건 가상클래스와 가상 요소를 명확히 구분하기 위함이지만 : 은 IE8이상부터 사용되고 :: 은 IE9부터 사용되기 때문에 CSS2 문법대로 :afterr :before 계속 사용해도 문제는 없다.