CSS 가상 클래스(싱글콜론 :) 과 가상 요소(더블콜론::) 의 정리

가상 클래스 (싱글 콜론 : 한개 사용)

설명
- 가상으로 class를 생성해주는 기능
- 별도의 class 지정 없이 해당 요소에게 css 속성을 부여할 수 있습니다.

예
:link / :hover / :first-child / :nth-child(n) 등

가상 요소 (더블 콜론 :: 두개 사용)

설명
- 가상으로 요소(엘리먼트) 를 생성해주는 기능
- 해당 요소에게 내용(content) 와  css 속성을 부여할 수 있습니다. (content: 'hello';

예
::before / ::after / ::first-line / ::first-letter 등

[추가]  :before 싱글콜론과 ::before 더블콜론의 차이

CSS2 에서는 싱글콜론을 사용했었고
CSS3 부터는 더블콜론을 사용합니다.
따라서 CSS3를 지원 하지 않는 IE8의 경우는 싱글콜론만 지원이 됩니다.
하지만 이제는 사실상 모든 브라우저에서 CSS3를 지원하므로
더블콜론을 사용하시면 되겠습니다.

 

 

 

 

http://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0before%EC%99%80after-%EA%B7%B8%EB%93%A4%EC%9D%98-%EC%A0%95%EC%B2%B4%EB%8A%94/

[공유]::before와::after, 그들의 정체는?

 

https://yeoninim.tistory.com/55

[CSS] 가상 요소, 가상 클래스