CSS1과 CSS2에서는 의사 클래스와 의사 요소를 나타낼 때 하나의 콜론(:)으로 함께 표기하였습니다.
하지만 CSS3에서는 의사 클래스의 표현과 의사 요소의 표현을 구분하기로 합니다.
따라서 CSS3에서는 의사 클래스는 하나의 콜론(:)을, 의사 요소에는 두 개의 콜론(::)을 사용하고 있습니다.
의사 요소를 통해 html의 특정 요소만 선택할 수 있습니다.
의사 요소의 종류
::first-letter
텍스트의 첫 글자를 선택합니다. block타입에만 사용할 수 있습니다.
사용 가능 속성
font, color, background, margin, padding, border, text-decoration, text-transform, line-height, float, clear, vertical-align(float 속성값이 none)예시
/*p태그의 첫번째 글자의 스타일을 바꿉니다.*/
p::first-letter { color: #FFFFFF; font-size: 2em; }::first-line
텍스트의 첫 줄(line)을 선택합니다. block타입에만 사용할 수 있습니다.
사용 가능 속성
font, color, background, word-spacing, letter-spacing, text-decoration, text-transform, line-height, float, clear, vertical-align예시
/*p태그의 첫번째 줄의 스타일을 바꿉니다.*/
p::first-line { color: #FFFFFF; font-size: 2em; }::before
특정 요소의 내용 부분 바로 앞에 다른 요소를 삽입할 때 사용합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.
예시
/*p태그 바로 앞에 ♥를 추가*/
p::before {
content: "♥";
}::after
특정 요소의 내용 부분 바로 뒤에 다른 요소를 삽입할 때 사용합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다.
예시
/*p태그 바로 뒤에 ♥를 추가*/
p::after {
content: "♥";
}::selection
해당 요소에서 사용자가 선택한 부분만을 선택할 때 사용합니다. 드래그하여 선택하거나, 더블클릭으로 범위지정한 경우 나타납니다.
예시
/*p태그에 글자를 선택하면(드래그, 범위지정) 선택한 부분만 스타일 변화*/
p::selection {
color: red;
background-color: yellow;
}::marker
글머리 기호 또는 숫자를 포함 하는 목록 항목의 마커 상자를 선택합니다. <il>, <summary>에서 사용 가능 합니다.
사용 가능 속성
font, color, white-space, text-combine-upright, unicode-bidi, direction, content, animation, transition예시
/*li태그 앞의 마커를 ✝로 변화*/
li::marker {
content: '✝ ';
font-size: 1em;
}
참고 자료 출처
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-elements
http://www.tcpschool.com/css/css_selector_pseudoElement
