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

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

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

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

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

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

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

<style>
  p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>

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> 요소에서 텍스트의 첫 글자를 형식화 합니다.