가상 요소(Pseudo Element)

- 가상 요소 (Pseudo Element)

의사 요소라고도 불리며, 일반적인 CSS 선택자로는 지정할 수 없는 미세한 영역을 선택하기 위해 사용한다.

요소에 따라 적용되는 효과가 다르며, 사용하는 방법은 CSS3을 기준으로 선택자 앞에 ::사용할 요소 이름을 붙여서 사용한다. (: 하나도 가능)

 

ex) .div::before

 

 

- 가상 요소의 종류

 

  1. ::before : 선택자의 내용(content) 바로 앞쪽에 내용(content)을 삽입한다.

  2. ::after : 선택자의 내용(content) 바로 뒤쪽에 내용(content)을 삽입한다.

  3. ::first-letter : 선택자의 내용 첫 글자를 선택한다.

  4. ::first-line : 선택자의 첫 번째 줄을 선택한다. (반응형에 따라 바뀜)

  5. ::marker : 목록 item 앞에 붙는 marker를 선택한다.

  6. ::selection : 마우스 드래그로 선택한 요소를 선택한다.

  7. ::placeholder : input 영역 안 text를 선택한다.