CSS :after Pseudo-element가 모든 HTML 요소에서 작동하지 않는 이유는 무엇입니까?

CSS :after 속성의 제약 조건 공개

CSS :after 의사 요소는 문서에서 요소의 콘텐츠 뒤에 콘텐츠를 추가합니다. 나무. 그러나 그 적용 가능성은 의문을 제기합니다.

요소 제한

CSS 사양에는 :after가 요소의 트리 콘텐츠 앞이나 뒤의 콘텐츠에 적용될 수 있다고 명시되어 있습니다. 제한 없이. 하지만 실제로는 이미지(), 입력(), 테이블(

이해 대체된 요소

이 동작을 이해하는 열쇠는 대체된 요소의 개념에 있습니다. 대체 요소는 이미지, 플러그인, 양식 요소 등 외부 리소스에 의해 모양과 크기가 정의된 요소입니다.

:after 및 대체 요소

결정적으로 , CSS 사양에는 :before 및 :after가 대체되지 않은 요소에서만 작동한다고 명시되어 있습니다. 따라서 대체된 요소는 및 <입력> :after 또는 :before 속성을 가질 수 없습니다.

DOM 구조 고려 사항

:before 및 :after를 대체되지 않은 요소와 함께 사용할 때 DOM 구조는 다음과 같습니다. this:

span

이미지와 같은 대체 요소의 경우 이 구조가 실현 가능하지 않아 행동에 불일치가 발생합니다.

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