가상 요소

요약

가상 클래스(pseudo-classes)처럼, 가상 요소(pseudo-element)는 선택자(selector)에 추가되지만 특별한 상태를 기술하는 대신, 문서의 특정 부분을 스타일할 수 있습니다. 예를 들어, ::first-line 가상 요소는 선택자에 의해 지정된 요소의 첫 줄만을 대상으로 합니다.

구문

selector::pseudo-element {
  property: value;
}

모든 가상 요소

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop
• ::placeholder
• ::marker
• ::spelling-error
• ::grammar-error

주의

가끔 딱 한 개(:) 대신 이중 콜론(::)을 봅니다. 이는 CSS3의 일부이고 가상 클래스와 가상 요소 사이를 구별하려는 시도입니다. 브라우저 대부분은 두 값 다 지원합니다.

선택자에 오직 가상 요소 하나만 쓸 수 있습니다. 문(statement) 내 단일 선택자 뒤에 나와야 합니다.