의사 요소

의사 요소는 요소의 지정된 부분을 스타일화 하는데 사용합니다. 예를 들어 다음과 같이 사용할 수 있습니다.

• 요소의 앞이나 뒤에 내용을 삽입하고 스타일 지정
• 요소의 첫문자 또는 첫번째 줄에 스타일 지정

의사 요소는 의사 클래스와 구별하기 위해 이중콜론을(::)을 붙여 사용합니다.

::before

::before { ... }

해보기
요소의 내용 이전에 일부 내용을 삽입할 수 있습니다.
요소의 내용 앞에 무언가를 삽입하고 스타일을 지정합니다.

::after

::after { ... }

해보기
요소의 내용 이후에 일부 내용을 삽입할 수 있습니다.
요소의 내용 끝에 무언가를 삽입하고 스타일을 지정합니다.

::first-letter

::first-letter { ... }

해보기
요소의 첫번째 문자를 선택합니다.
::first-letter 속성은 블록수준 요소에서만 사용할 수 있습니다.

::first-line

::first-line { ... }

해보기
요소의 첫번째 줄을 선택합니다.
::first-line 속성은 블록수준 요소에서만 사용할 수 있습니다.

::selection

::selection { ... }

해보기
사용자가 선택한 텍스트에 적용합니다 ::selection은 색상, 배경, 커서 및 윤곽선과 같은 몇 가지 CSS 속성 만 적용 할 수 있습니다