`:after`가 대체된 요소에 콘텐츠를 추가하지 않는 이유는 무엇입니까?

:after가 일부 요소에는 콘텐츠를 추가하고 다른 요소에는 추가하지 않는 이유는 무엇입니까?

CSS :after 의사 요소는 이후에 콘텐츠를 추가하기 위한 것입니다. 요소의 문서 트리 콘텐츠. 그러나 이 기능은 특정 요소에 대해서만 일관되게 작동하는 것으로 관찰되었습니다. 이 동작을 이해하려면 대체 요소의 개념을 살펴봐야 합니다.

CSS 사양에 따르면 대체 요소는 이미지, 플러그인, 양식 등 외부 리소스에 의해 모양과 크기가 정의되는 요소입니다. 강요. 대조적으로, 대체되지 않은 요소는 시각적 특성이 CSS 또는 브라우저의 기본 스타일에 의해 제어되는 요소입니다.

중요한 점:before 및 :after는 대체되지 않은 요소에서만 작동합니다. 즉, 이미지, 대체된 양식 컨트롤 및 기타 대체된 요소에는 이러한 의사 요소를 사용하여 콘텐츠를 추가할 수 없습니다.

이 제한의 근거는 대체된 요소가 일반적으로 미리 정의된 크기와 모양을 갖는다는 것입니다. 따라서 앞이나 뒤에 추가 콘텐츠를 삽입하는 것이 비현실적입니다. 대신 대체된 요소의 시각적 특성은 일반적으로 소스 코드나 CSS 스타일을 통해 제어됩니다.

예를 들어 다음 HTML 및 CSS는 단락 요소 앞뒤에 콘텐츠를 추가하지만 이미지에는 작동하지 않습니다. :

<p><span>Before</span>Paragraph Content<span>After</span></p>
<img src="image.jpg"/><span>After Image</span>

p:before {
  content: "Before: ";
}

p:after {
  content: " After";
}

img:after {
  content: "After Image";
}

교체된 요소의 개념을 이해함으로써 :after가 특정 요소에서는 작동하지만 다른 요소에서는 작동하지 않는 이유를 설명할 수 있으며, 해당 동작이 의도된 것이며 전체 요소에서 일관된다는 것이 분명해집니다. 브라우저.

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