CSS `:before` 및 `:after` 의사 요소가 `` 요소와 작동하지 않는 이유는 무엇입니까?

의사 요소 및 이미지 요소: 호환성 딜레마

CSS 영역에서는 :before 및 :after와 같은 의사 요소가 널리 사용됩니다. 웹페이지 요소의 시각적 모양을 향상시키는 데 사용됩니다. 그러나 이미지 요소()의 경우 이러한 의사 요소는 공백을 그리는 것처럼 보이며 질문을 제기합니다. 왜 img 요소와 작동하지 않습니까?

기술적 설명

그 이유는 CSS 사양 자체에 있습니다. 공식 문서에는 "이 사양은 교체된 요소(예: HTML의 IMG)와 ::before 및 ::after의 상호 작용을 완전히 정의하지 않습니다."라고 명시되어 있습니다. 즉, 이미지와 같은 대체 요소에 적용될 때 의사 요소의 동작은 현재 표준에서 완전히 지정되지 않습니다. 이러한 모호함으로 인해 브라우저 불일치 및 지원 부족의 여지가 남습니다.

현재 브라우저 지원

이러한 불특정 동작의 결과로 Chrome 및 Firefox와 같은 주요 브라우저는 지원하지 않기로 결정했습니다. img 요소로 의사 요소를 지원합니다. 즉, 이미지에 :before 또는 :after를 포함하도록 CSS를 꼼꼼하게 작성하더라도 효과가 표시되지 않습니다.

가능한 해결 방법

그 동안에는 현재 의사 요소가 img 요소와 함께 작동하도록 하는 공식적인 방법은 없습니다. 몇 가지 해결 방법이 있습니다. 탐색:

• 이미지를 컨테이너 요소로 감싸기: 이미지를
  또는 요소를 선택하고 이미지 자체 대신 의사 요소를 컨테이너에 적용합니다.
• CSS 필터 사용: 의사 요소와 유사한 시각적 효과를 얻으려면 상자 그림자 또는 밝기와 같은 CSS 필터를 사용하세요.

미래 전망

CSS 사양에 따르면 대체 요소와 의사 요소 상호 작용에 대한 전체 정의는 향후 사양에 설명될 것입니다. 이로 인해 img 요소를 사용하여 :before 및 :after를 향후 지원할 수 있는 가능성이 열릴 수 있습니다. 그러나 그때까지 이러한 해결 방법은 이미지에 대해 유사한 기능을 찾을 때 가장 실용적인 접근 방식으로 남아 있습니다.