CSS 가상 요소(pseudo=element)는 요소의 지정된 부분에 스타일을 지정하는데 사용됩니다.

예를 들어, 다음과 같은 용도로 사용할 수 있습니다.

• 요소의 첫 글자 또는 줄의 스타일을 지정
• 요소의 콘텐츠 앞(before) 또는 뒤(after)에 콘텐츠 삽입

가상 요소(pseudo-element)의 구문:

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

first-line 가상 요소는 텍스트의 첫 번째 줄에 특별한 스타일을 추가하는 데 사용됩니다.

하기의 예제는 모든 <p> 요소에 있는 텍스트의 첫 번째 줄을 형식화(format)합니다.

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

small caps (작은 대문자): 작은 대문자(소문자 크기의 대문자)

Note: ::first-line 가상 요소는 블럭 레벨 요소에만 적용할 수 있습니다.

아래의 속성은 first-line 가상 요소에 적용됩니다.

• 폰트 속성 (font properties)
• 컬러 속성 (color properties)
• 배경 속성 (background properties)
• 단어 간격 (word-spacing)
• 문자 간격 (letter-spacing)
• 텍스트 장식 (text decoration)
• 수직 정렬 (vertical align)
• 텍스트 장식 (text-decoration)
• 줄 높이 (line-height)
• 클리어 (clear)

이중 콜론 표기법-::first-line 대 :first-line

이중 콜론은 CSS3의 가상 요소(pseudo-elements)의 단일 콜론 표기법을 대체했습니다.
이것은 W3C가 가상 클래스(pseudo-classes)와 가상 요소(pseudo-elements)를 구별하려는 시도였습니다.

단일 콜론 구문은 CSS2 및 CSS1의 가상 클래스와 가상 요소 모두에 사용되었습니다.

이전 버전과의 호환성을 위해 CSS2 및 CSS1 가상 요소에 단일 콜론 구문을 사용할 수 있습니다.

::first-letter 가상 요소는 텍스트의 첫 글자에 특별한 스타일을 추가하는 데 사용됩니다.

다음 예제는 모든 <p> 요소에서 텍스트의 첫 번째 단어의 첫 글자에 스타일을 추가합니다.

p::first-letter {
  color: #ff0000;
  font-variant: ss-large;
}

Note: ::first-letter 가상 요소는 블럭 레벨 요소에만 적용할 수 있습니다.

아래의 속성은 first-letter 가상 요소에 적용됩니다.

• 폰트 속성 (font properties)
• 컬러 속성 (color properties)
• 배경 속성 (background properties)
• 마진 속성 (margin properties)
• 패딩 속성 (padding properties)
• 보더 속성 (border properties)
• 텍스트 장식 (text decoration)
• 수직 정렬 (vertical align) - “float” 속성이 “none”일 때만
• 텍스트 변환 (text-transform)
• 줄 높이 (line-height)
• 플로트 (float)
• 클리어 (clear)

가상 요소는 CSS 클래스와 결합할 수 있습니다:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

상기 예제는 class="intro" 를 가진 단락의 첫 번째 단어의 첫 번째 철자를 red 컬러의 큰 글꼴로 표시합니다.

여러 가상 요소를 결합할 수도 있습니다.

다음 예제에서, 단락의 첫 글자는 xx-large 글꼴 크기의 red 컬러입니다.
첫 번째 줄의 나머지 글꼴은 blue이며 작은 대문자로 표시됩니다.
나머지 단락은 기본 글꼴 크기 및 색상이 됩니다.

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
 
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

::before 가상 요소를 사용하여 요소의 콘텐츠 앞에 다른 콘텐츠를 삽입할 수 있습니다.

다음 예제에서는 각 <h1> 요소의 콘텐츠 앞에 이미지를 삽입합니다.

This is a heading.

The ::before pseudo-element inserts content before the content of an element.

This is a heading.

::after 가상 요소를 사용하여 요소의 콘텐츠 앞에 다른 콘텐츠를 삽입할 수 있습니다.

다음 예제에서는 각 <h1> 요소의 콘텐츠 뒤에 이미지를 삽입합니다.

<style>
h1::after {
  content: url(smiley.gif);
    }
</style>

::marker 가상 요소는 목록 항목(list items)를 선택합니다.

다음 예제에서는 목록 항목에 스타일을 지정합니다.

• Coffee
• Tea
• Milk

1. First
2. Second
3. Third

::selection 가상 요소는 사용자가 선택한 요소의 부분과 일치합니다.

::selection: color, background, cursor 그리고 outline 의 CSS 속성을 적용할 수 있습니다.

다음 예제에서는 선택한 텍스트를 노란색 배경에서 빨간색으로 만듭니다.

Select some text on this page:

This is a paragraph.

Note:Firefox supports an alternative, the ::-moz-selection property.