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

이미지 요소를 사용하여 의사 요소의 기능 다루기

기능을 향상하기 위한 시도로 이 질문은 :before 및 같은 의사 요소가 왜 있는지 탐구합니다. :after는 div 및 범위와 같은 다른 태그와 마찬가지로 이미지() 요소와 상호 작용하지 않습니다. 문제를 설명하기 위해 다음 HTML 및 CSS를 고려하십시오.

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt=""/>

img:before {
  content: "hello";
}

Chrome 13 및 Firefox 6과 같은 브라우저에서 이 코드를 검사하면 이미지 요소에 예상되는 변경 사항이 발생하지 않는다는 것이 분명해집니다. 이 동작은 div 및span 요소가 나타내는 호환성과 대조됩니다.

사양을 자세히 살펴보면 다음 발췌문이 있습니다.

Note. This specification does not fully define the interaction of ::before and ::after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

이 진술은 의사 요소 간의 상호 작용에 대한 불완전한 정의를 나타냅니다. 및 이미지 요소는 현재 비호환성을 암시합니다. 이 문제에 대한 추가 정보는 이 플랫폼의 다른 답변을 참조하세요.

위 내용은 `:before` 및 `:after` 의사 요소가 `` 요소와 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!