CSS Pseudo-elements

요소의 지정된 부분을 꾸미기 위해 쓰인다.

예를 들어,

요소의 첫번째 문자, 또는 줄 꾸밈

요소의 내용의 앞이나 뒤에 내용 삽입

문법

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

더블 콜론 :: vs :

CSS3에서 더블 콜론은 싱글 콜론을 대체했다. W3C로부터의 pseudo-classes와 pseudo-elements 사이의 구분을 위한 시도이다.

::first-line pseudo-element

첫 줄에 특별한 스타일을 추가하기 위해 쓰인다.

모든 <p>요소들에 있는 텍스트의 첫 줄을 포맷한다.

예시

::first-line 의사 요소는 오직 block 단위 요소에만 적용된다.

다음 속성들은 ::first-line 의사 요소에 적용된다.

font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear

::first-letter pseudo-element

텍스트의 첫 문자에 특별한 스타일을 추가하기 위해 쓴다.

모든 <p> 요소 안에 있는 텍스트의 첫번째 문자를 포맷한다.

예시

::first-letter 의사 요소는 오직 블록 레벨 요소에만 적용된다.

다음 속성들은 ::first-letter pseudo-element에 적용될 수 있다.

font, color, background, margin, padding, border, text-decoration, vertical-align(오직 float 속성값이 none인 경우), text-transform, line-height, float, clear

pseudo-elements and css classes

클래스에다가 의사 요소를 함께 쓸 수 있다.

<p>태그의 클래스가 intro인 것을 찾아서 첫번째 문자를 변경한다.

예시

multiple pseudo-elements

몇가지 의사 요소들은 묶일 수 있다.

다음 예시에 따르면 단락의 첫 문자는 빨강, 사이즈는 xx-large가 될 것이다. 첫 줄의 남은 것들은 파랑, 글자는 작은 대문자가 될 것이다.

단락의 나머지는 기본 사이즈 색이 될 것이다.

::before pseudo-element

요소의 내용물 앞에 내용물을 삽입하기 위해 쓰인다.

다음 예시는 각 <h1>요소의 내용물 이전에 이미지를 삽입한다.

예시

::selection pseudo-element

사용자에 의해 선택된 요소의 부분이 매칭된다.

color, background, cursor, outline에 적용될 수 있다.

다음 예시는 선택된 텍스트를 노란 배경에 빨간 글자로 만든다.

https://www.w3schools.com/css/css_pseudo_elements.asp