CSS가 모든 HTML 요소에 대해 작동하지 않는 이유는 무엇입니까?

CSS :after 동작 및 요소 호환성

CSS :after 속성은 문서 흐름에서 요소 뒤에 콘텐츠를 확장합니다. 그러나 모든 요소가 이 동작을 지원하는 것은 아닙니다. :after가 특정 요소에만 작동하는 이유는 무엇입니까?

대답: 대체된 요소와 대체되지 않은 요소

CSS 사양에 따르면 대체되지 않은 요소만 사용할 수 있습니다. :before 및 :after 속성이 있습니다. 대체된 요소의 모양과 크기는 이미지, 플러그인, 양식 컨트롤과 같은 요소를 포함하여 외부에서 결정됩니다.

대체된 요소란 무엇입니까?

대체된 요소는 다음과 같습니다.

• 이미지 ()
• 플러그인(
• 양식 요소(, , <input>, <select>)</select>

왜 :before와 :after를 사용하지 마세요. 대체된 요소로 작업

CSS 사양에서는 :before 및 :after와 대체된 요소의 상호 작용이 완전히 정의되지 않았다고 명시합니다. 이 측면은 향후 사양을 위해 예약되어 있습니다.

예

다음 예를 고려하세요.

<span>Content of span</span>

span:before {
  content: "Before ";
}

span:after {
  content: " After";
}

이에 대한 DOM 구조 예는 다음과 같습니다.

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

이 구조는 이미지와 같은 대체 요소에는 작동하지 않습니다. 대체되지 않은 요소와 동일한 방식으로 콘텐츠가 없습니다.

따라서 CSS :after 속성은 대체되지 않은 요소에만 사용할 수 있습니다. 요소의 모양은 요소 자체 내의 콘텐츠에 의해 결정되기 때문입니다. .

위 내용은 CSS가 모든 HTML 요소에 대해 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!