실제 요소 내의 가상의 요소 선택

CSS에서는 실제 HTML 요소로 존재하지는 않지만,
CSS를 통해서 요소 내에 마치 새로운 요소가 있는 것처럼 선택하여 스타일할 수 있는 가상 요소(Pseudo-elements) 선택자가 있습니다.

가상 요소란 무엇인가?

HTML 문서의 소스 코드에는 실제로 존재하지 않지만, CSS를 사용하여 요소 내의 일부를 마치 실제 요소처럼 스타일링하거나 콘텐츠를 추가할 수 있는 선택자가 있습니다.

이러한 선택자를 가상 요소(Pseudo-element, '의사 요소'라고도 함)라고 합니다.
즉, 이 선택자는 실제 HTML 요소는 아니지만, 특정 요소 내부에서 가상의 영역을 지정해 스타일을 적용하거나 콘텐츠를 추가할 수 있습니다.

‘Pseudo’는 '가상'이라는 뜻으로, 이러한 특성 때문에 이 선택자를 '가상 요소'라고 부릅니다.

가상 요소의 구문

  • 가상 요소는 더블 콜론(::) 기호 뒤에 가상 요소 이름(예: ::before, ::placeholder)을 붙여 사용합니다.
  • 함수형 가상 요소는 괄호 안에 인수를 넣어(예: ::slotted(span)) 사용할 수 있습니다.

알아두세요!
CSS1 및 CSS2 시절에는 가상 요소 역시 가상 클래스와 마찬가지로 단일 콜론(예: :before, :first-letter)을 사용하여 표기했습니다.
하지만, CSS3부터 가상 요소는 가상 클래스와 구별하기 위해 더블 콜론(::)만을 사용하고 있습니다.

CSS 
p::before { /* <p> 요소 내부의 실제 콘텐츠 바로 앞에 가상의 요소로 선택 */
    content: "👉";
    vertical-align: 0.2em;
    margin-right: 0.3em;
}
input::placeholder { /* <input> 요소 내부의 플레스홀더 텍스트를 가상의 요소로 선택 */
    color: blue;
}

/* 함수형 가상 요소 */
::slotted(span) { /* shadow DOM 내부의 슬롯을 가상의 요소로 선택 */
  background: silver;
}

가상 요소 선택자 목록

가상 요소 선택자 목록
::before 콘텐츠 영역 바로 앞에 가상 요소 선택
::before 가상 요소는 선택한 요소의 실제 콘텐츠 바로 앞에(before) 첫 번째 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다. 이 선택자를 사용할 때는 content 속성을 필수적으로 지정해야 합니다.
::after 콘텐츠 영역 바로 뒤에 가상 요소 선택
::after 가상 요소는 선택한 요소의 실제 콘텐츠 바로 뒤에(after) 마지막 자식인 스타일이 가능한 가상의 요소를 CSS로 생성하는 선택자입니다. 이 선택자를 사용할 때는 content 속성을 필수적으로 지정해야 합니다.
::marker 자동으로 생성된 리스트 마커 선택
::marker 가상 요소는 <li>나 <summary>처럼 display 속성의 값이 list-item인 요소에 자동으로 생성된 리스트 마커를 선택하는 선택자입니다.
이 리스트 마커는 글머리 기호나 숫자 등이 포함된 가상의 요소를 말합니다.
::placeholder 플레이스홀더 텍스트 선택
::placeholder 가상 요소는 HTML placeholder 속성이 지정된 텍스트 입력 컨트롤 요소의 플레이스홀더 텍스트를 스타일링하는 데 사용되는 선택자입니다.
::selection 텍스트 드래그 영역 선택
::selection 가상 요소는 사용자가 텍스트를 드래그해서 선택한 부분에 스타일을 적용할 수 있게 합니다. 사용자가 텍스트를 선택할 때, 그 선택된 부분(‘하이라이트된 부분'이라고도 함)에 지정한 스타일을 적용할 수 있게 합니다.
::backdrop 최상위 레이어 요소의 배경 레이어 선택
최상위 레이어(Top Layer)에 렌더링된 요소는 화면 전체를 덮는 별도의 배경 레이어가 생성됩니다. ::backdrop 가상 요소는 이 배경 레이어를 스타일링하는 데 사용되는 선택자입니다.

명세서

가상 요소의 명세서 사양
명세서 사양
Pseudo-elemnts CSS Pseudo-Elements Module Level 4

같이 보기