:after 과 ::after 의 차이점은 바로 이것입니다.

:after은 CSS2에서 , ::after은 CSS3에서 사용하는 것입니다.

 

즉, 가상요소(Pseudo-elements)는 

CSS2에서는 : 가 하나만 표기되고

CSS3에서는 :가 두개 표기됩니다.

 

CSS3에서 ::after로 표기되는 이유는 가상클래스와 가상요소의 차이를 분명하게 하기 위함이라고 합니다.

(둘 다 앞에 : 가 붙어서 헷갈릴까봐 차이를 주기위함인 것같음)

 

가상클래스 :hover, :active, :checked, :last-child ...등등
가상요소 ::after, ::before, ::first-letter, ::placeholder ...등등

하지만 호환성을 위해 :after, :before 도 허용됩니다.

 

결론.

가상클래스와 가상요소가 헷갈리지 않는 다면 그냥 :after, :before 쓰는게 호환성에도 좋으니

굳이 ::after, ::before 사용하지 않아도 된다. 땅땅땅!

 

 

*참고사이트

stackoverflow.com/questions/21676996/what-is-the-difference-between-after-and-after

 

 

공감❤과 구독하기✔를 눌러주시면 블로거는 힘이나요😊