[CSS3]가상 요소 선택자 (pseudo-element) 정리

가상 요소 선택자 (pseudo-element) 정리

 

가상 요소는 자바스크립트 없이 HTML 페이지에 콘텐츠 요소를 추가하는 기능을 가지고 있고, 콜론 두개를 붙여서 가상 요소임을 표시합니다(가상 클래스의 경우 콜론 하나).

ex) p::after, span::before, li::market, div::selection

가상요소의 종류

::before 요소 앞에 컨텐츠를 추가

ex) p::before {content:"앞에 추가"}

앞에 추가 본문 내용

 

::after 요소 뒤에 컨텐츠를 추가

ex) p::before {content:"뒤에 추가"}

본문 내용 뒤에 추가

 

::marker li태그에 붙을 마커 표시

ex) li::marker {content:"😊"}

😊 메뉴 1

😊 메뉴 2

 

::selection 마우스로 드래그한 영역을 선택

ex) p::selection {background-color: #ff4d4d; color:#ffffff;}

본문 내용

 

::first-letter 요소의 첫 글자를 선택

ex) p::first-letter {background-color: #ff4d4d; color:#ffffff;}

본문 내용

 

::first-line 요소의 첫 줄을 선택

p::first-letter {background-color: #ff4d4d; color:#ffffff;}

::before와 ::after는 요소 앞에 위치

빨간색 네모가 엘리먼트, 주황색 네모가 ::before 가상 요소, 검은색 네모가 ::after 가상 요소입니다.

가상 요소를 사용할 때 ::before는 엘리먼트 뒤에 위치할 것 같지만 기본적으로 가상 요소는 엘리먼트 앞에 위치합니다.

 

가상 요소를 엘리먼트 뒤로 보내려고 할 때 엘리먼트에 z-index를 주는 경우 아무리 높은 값을 줘도 가상 요소가 뒤로 가지 않습니다.

가상 요소를 뒤로 보내려면 가상 요소 자체에 z-index를 -값을 주어 뒤로 보내야 합니다.

content 속성

content의 속성값은 css로 표현이 가능한 대부분의 형식이 사용 가능

 

사용 가능한 형식: 이미지, 데이터셋, 카운터 등

사용 불가능한 형식: html태그 등

 

문자열을 표시할 경우 (''),("") 따옴표를 사용해 표현합니다.

 

문자열: {content:"문자"}

 

이미지: {content:url(이미지 경로)}

이미지의 크기는 제어하지 못함

 

데이터셋: {content:attr(data-set)}