[HTML/CSS] 의사 요소 pseudo-element

[CSS] 의사 요소 pseudo-element

CSS 의사 요소(pseudo-element 가상요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있다

1. 문법

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

• 하나의 selector에 하나의 pseudo-element를 사용할 수 있다
• 반드시 단순 selector 뒤에 위치해야 한다
• 단일 콜론(:)이 아닌 이중 콜론(::)을 사용해 의사 클래스(pseudo-class)와 의사요소를 구별 한다. 그러나 과거 W3C 명세에서는 이런 구별을 두지 않았기 때문에 대부분의 브라우저는 기존 의사요소에 대해 두 구문 모두 지원한다.

2. 목록

• ::after (:after)
• ::backdrop
• ::before (:before)
• ::cue
• ::cue-region
• ::first-letter (:first-letter)
• ::first-line (:first-line)
• ::file-selector-button
• ::grammar-error Experimental
• ::marker
• ::part()
• ::placeholder
• ::selection
• ::slotted()
• ::spelling-error Experimental
• ::target-text Experimental

참고

• mdn web docs - Pseudo-elements