CSS / 선택자(Selector) / 가상 요소

가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다.
가상 클래스는 콜론을 한 개(:), 가상 요소는 콜론을 두 개(::) 씁니다. 하지만 콜론을 한 개(:)만 써도 대부분의 브라우저에서 제대로 작동합니다.

::first-line은 요소의 첫번째 줄을 선택합니다. 예를 들어

p::first-line {
  color: red;
}

는 p 요소의 첫번째 줄의 글자색을 빨간색으로 만듭니다.

::first-letter는 요소의 첫번째 문자를 선택합니다. 예를 들어

p::first-letter {
  color: red;
}

는 p 요소의 첫번째 문자의 색을 빨간색으로 만듭니다.

::before는 요소의 앞을 선택합니다. 예를 들어

p::before {
  content: "xyz";
  color: red;
}

는 p 요소 앞에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.

::after는 요소의 뒤를 선택합니다. 예를 들어

p::after {
  content: "xyz";
  color: red;
}

는 p 요소 뒤에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.

::selection은 마우스 드래그 등으로 선택한 텍스트를 선택합니다. 마우스로 텍스트 드래그했을 때 배경색, 글자색 바꾸기를 참고하세요.

CODING FACTORY