Pseudo-element

◎ Pseudo-element

- syntax: selector::pseudo-element { ... }

- selector:pseudo-class  vs  selector::pseudo-element 

- 가상 클래스와 가상 요소를 구분하기 위해 단일 콜론과 이중 콜론을 사용

- 단일 콜론 (:hover, :first-child): 동적이거나 유동적이면서 어떤 요소의 전체에 영향을 주는 경우

- 이중 콜론 (::first-letter, ::before): 정적이거나 어떤 요소의 일부분에 영향을 주는 경우

- 모든 브라우저에서 둘 다 사용해도 무방

- 참조: http://blog.naver.com/PostView.nhn?blogId=pjh445&logNo=220887484266&categoryNo=0&parentCategoryNo=0&viewDate=&currentPage=1&postListTopCurrentPage=1&from=postView

- ::first-line 

- first line of a text

- only be applied to block-level elements

- 가능한 스타일: font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear

- ::first-letter

- first letter of a text

- only be applied to block-level elements

- 가능한 스타일: font, color, background, margin, padding, border, text-decoration, vertical-align, text-transform, line-height, float, clear

- A::before

- 요소 A의 문단 앞에 스타일 지정

- A::after

- 요소 A의 문단 뒤에 스타일 지정

- ::selection

- 마우스 드래그 시 지정되는 부분

- 반드시 이중 콜론을 사용해야 함