버전차이
CSS2에서는 :after로 사용, CSS3에서는 ::after로 사용한다.
:을 사용하는 것들에는 가상클래스와 가상엘리먼트가 있는데 이 둘을 구분하기 위해 CSS3부터 바뀌었다.
여기서 잠깐!
❓ 가상클래스와 가상엘리먼트의 차이?
❗ 가상클래스란?
실제로 존재하는 요소에 클래스를 부여해 CSS를 제어
❗ 가상엘리먼트란?
존재하지 않는 것을 만들어 CSS를 부여
그렇다면 가상클래스와 가상엘리먼트에는 어떤 것이 있을까?
/* 가상클래스 */
a:hover {} /* 해당 요소에 마우스를 올렸을 때 */
a:active {} /* 해당 요소를 클릭했을 때 */
input:checked {} /* input type이 checkbox나 radio일 경우 체크된 상태의 스타일*/
input:required {} /* input 중 필수입력인 상태에 스타일 */
button:disabled {} /* 비활성화 처리 상태 스타일 */
li:first-child {} /* 첫번째 요소 */
li:last-child {} /* 마지막 요소 */
li:nth-child(odd) {} /* 홀수(odd) 요소 */
/* 가상엘리먼트(요소) */
h2::before {content: "";} /* 요소 앞에 배치 */
span::after {content: "";} /* 요소 뒤에 배치 */
p::first-letter /* 요소의 첫번째 글자 */