[CSS] 가상 요소

가상요소란?

실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다.

보통 콜론(:)을 사용하지만 가상 클래스와의 구분을 하기 위해 이중콜론(::)의 사용을 권장

가상요소	설명
::before	지정된 요소의 앞에 가상의 요소 생성 <div class="main">    <p>test1</p> </div>   .main p:before{content:"- "} '- test1'로 출력 (- 표시를 before로 삽입)
::after	지정된 요소의 뒤에 가상의 요소 생성
::first-letter	지정된 요소의 첫 번째 글자에 스타일 적용
::first-line	지정된 요소의 첫 번째 줄에 스타일 적용

가상 요소 제거하는 법

.class:before {content: none;}
가상 요소나 클래스를 없애고 싶을때 쓴다.

가상 클래스와 가상 요소의 차이

가상 클래스는 특정 상태일 때 스타일을 적용하는 것이고 가상 요소 선택자는 특정 상태가 아니더라도 스타일을 적용할 수 있다.

가상 클래스는 기존에 존재하는 요소를 선택하는 것이고 가상 요소는 기존에 존재하지 않는 가상의 요소를 만들어 선택하는 것이다.

가상 클래스는 콜론을 1개 붙인 :hover와 같은 형태로, 가상 요소는 콜론을 2개 붙인 ::first-letter로 작성한다. 하지만, 과거 W3C 명세에서는 구별을 두지 않았다는 이유로 대부분의 브라우저가 콜론의 개수와 관계없이 모두 지원한다고 한다.(이중 콜론은 ie9부터 지원함)