::before, ::after 가상 요소(Pseudo-elements)

📌 가상 요소(Pseudo-elements)란?

- CSS 가상 요소는 선택자에 추가하는 키워드로 선택한 요소(elements)의 일부에만 스타일을 적용할 수 있고 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용할 수 있음!!
- HTML에 새로운 엘리먼트를 추가한 것처럼 동작함
- 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함

📕 가상 요소 문법

선택자::의사요소이름 {속성: 속성값;}

- 하나의 HTML 요소에 여러개의 의사 요소를 동시에 적용 가능함

❗❗ 주의점

- CSS1과 CSS2에서는 하나의 콜론(:)으로 가상 요소를 나타내어 CSS3를 지원하지 않는 브라우저에서는 적용되지 않을 수 있음
- CSS3에서는 가상 클래스는 하나의 클론(:)을, 가상 요소에는 두 개의 콜론(::)을 사용하고 있음

📚 가상 요소 종류

Selector	Example description
::before	특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입
::after	특정 요소의 내용(content) 부분 바로 두에 다른 요소를 삽입
::first-letter	각 요소의 첫 글자를 선택
::first-line	각 요소의 첫 번째 줄을 선택
::marker	marker 목록 항목의 마커를 선택
::selection	해당 요소에서 사용자가 선택한 요소 부분을 선택
::placeholder	input 필드 안 텍스트에 스타일을 적용

📚 :: before ::after

• ::before 
  
  • 실제 내용 바로 앞에 생성되는 자식 요소
• :: after
  • 실제 내용 바로 뒤에서 생성되는 자식 요소

✔ 공통점
- before 와 after를 사용할 땐 content 라는 속성이 필요함

❓ content란?
-> HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성시켜주는 가짜 속성

p::before {
  content: '♥';
  color: pink;
}

/* p태그 앞에 분홍색 하트가 입력됨 */

p::after{
  content: '♥';
  color: pink;
}

/* p태그 뒤에 분홍색 하트가 입력됨 */

 

❓ 가상 클래스(Pseudo-Class)란?

- 별도의 class를 지정하지 않아도 지정한 것처럼 요소를 선택할 수 있는 것으로 가상 클래스는 선택하고자 하는 HTML  용소의 특별한 '상태(state)'를 명시할 때 사용함

 

참조:https://velog.io/@eunoia/Pseudo-Element%EA%B0%80%EC%83%81%EC%9A%94%EC%86%8C%EB%9E%80