CSS 의사 요소(Pseudo-elements)란?

의사 요소는 CSS 선택자에 추가하는 키워드, 특정 요소의 일부분에 스타일을 적용할 때 사용
일반적인 CSS 선택자는 요소 전체의 스타일을 지정하지만, 의사요소를 사용하면 요소 내부의 특정 부분에만 스타일을 적용할 수 있음
ex - ::before, ::after, ::first-letter, ::first-line 등이 있음

::before와 ::after는 콘텐츠를 삽입할 때 유용하게 사용
ex - 특정 요소 앞이나 뒤에 장식적인 아이콘을 추가할 때 활용할 수 있음

button::before {
  content: '🔥';
  margin-right: 5px;
}

::before사용 시 버튼 앞에 불꽃 이모지가 추가됨
::after를 사용하면 요소 뒤에 내용을 추가할 수도 있음

이처럼 의사 요소는 HTML 구조를 변경하지 않고도 특정 부분에 스타일을 적용할 수 있게 해줌

의사 요소와 의사 클래스의 차이?

의사 요소는 요소의 특정 부분에 스타일을 적용하는 반면, 의사클래스는 요소의 상태나 조건을 기반으로 스타일을 변경한다는 점에서 차이가 있음

ex- ::hover는 사용자가 요소 위에 마우스를 올렸을 때 스타일을 변경하는 의사 클래스, ::before는 요소의 앞부분에 콘텐츠를 삽입하는 의사 요소.
즉, 의사 클래스는 어떤 상태/조건인지를 기준으로 동작, 의사요소는 어떤 부분인지를 기준으로 동작