CSS `:after`가 이미지 및 입력과 같은 대체 요소에 콘텐츠를 추가하지 않는 이유는 무엇입니까?

CSS :after는 특정 요소에 콘텐츠를 추가하지 않음

CSS :after 속성은 문서 트리의 요소 뒤에 콘텐츠를 삽입하는 데 사용됩니다. . 그러나 단락(

) 및 표(

)와 같은 특정 요소에서만 작동하는 것으로 보이며 이미지(<img src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="CSS `:after`가 이미지 및 입력과 같은 대체 요소에 콘텐츠를 추가하지 않는 이유는 무엇입니까?" >) 및 양식 입력()과 같은 대체 요소에서는 작동하지 않는 것으로 보입니다. ).

:after 및 :before의 허용 여부를 결정하는 요소 속성?

:after 및 :before의 동작은 대체된 요소가 다르게 작동한다는 사실에 따라 결정됩니다. 대체된 요소는 이미지, 플러그인, 양식 요소 등 외부 리소스에 의해 모양과 크기가 정의된 요소입니다.

CSS 사양에 따르면 :before 및 :after는 대체되지 않은 요소에서만 작동합니다. 즉, 요소 ​​교체 전이나 후에 콘텐츠를 추가하는 데 사용할 수 없습니다.

Span의 예

다음 HTML을 고려하세요.

<span>Content of span</span>

다음 CSS를 사용하면:

span:before {
  content: "Before";
}

span:after {
  content: "After";
}

이 시나리오의 DOM은 다음과 같습니다. this:

<span>
  <before>Before</before>
  Content of span
  <after>After</after>
</span>

이 구조는 :before 및 :after가 대체되지 않은 요소 앞뒤에 콘텐츠를 삽입하는 방법을 보여줍니다.

이미지 예외

그러나 이미지에 :after를 사용하면 동일한 결과가 나오지 않습니다. 결과:

<img  src="/static/imghwm/default1.png" data-src="image.png" class="lazy" alt="CSS `:after`가 이미지 및 입력과 같은 대체 요소에 콘텐츠를 추가하지 않는 이유는 무엇입니까?" >

img:after {
  content: "After";
}

이는 :after가 대체된 요소의 모양을 변경할 수 없기 때문입니다.

위 내용은 CSS `:after`가 이미지 및 입력과 같은 대체 요소에 콘텐츠를 추가하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!