CSS 의사 요소(Pseudo-elements)란 무엇인가요?

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

::before와 ::after는 콘텐츠를 삽입할 때 유용하게 사용됩니다. 예를 들어, 특정 요소 앞이나 뒤에 장식적인 아이콘을 추가할 때 활용할 수 있습니다.

button::before {
  content: '🔥';
  margin-right: 5px;
}
위 코드처럼 ::before를 사용하면 버튼 앞에 불꽃 이모지가 추가됩니다. 이와 유사하게 ::after를 사용하면 요소 뒤에 내용을 추가할 수도 있습니다.

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

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

예를 들어, :hover는 사용자가 요소 위에 마우스를 올렸을 때 스타일을 변경하는 의사 클래스이며, ::before는 요소의 앞부분에 콘텐츠를 삽입하는 의사 요소입니다. 쉽게 말해, 의사 클래스는 "어떤 상태/조건인지" 를 기준으로 동작하고, 의사요소는 "어떤 부분인지" 를 기준으로 동작한다고 이해하면 됩니다.