CSS :after가 요소 뒤에 콘텐츠를 추가하지 못하는 경우는 언제입니까?

특정 요소에 대한 CSS :after의 제한 이해

CSS :after 의사 요소는 요소의 문서 뒤에 콘텐츠를 추가하는 데 사용됩니다. 트리 내용. CSS 사양에는 제한 사항이 명시적으로 명시되어 있지 않지만 :after는 특정 요소에서만 작동하는 것으로 나타났습니다.

요소 호환성 결정

결정하는 핵심 요소 요소가 :after 속성을 허용할 수 있는지 여부는 대체된 요소인지 여부입니다. 이미지() 및 양식 입력()과 같은 대체 요소는 외부 리소스에 의해 정의된 모양과 크기를 갖습니다.

CSS 사양에는 :before 및 :after만 명시적으로 명시되어 있습니다. 대체되지 않은 요소로 작업합니다. 이는 다음과 같은 요소가 대체되었음을 의미합니다.

다음을 가질 수 없습니다: 콘텐츠가 추가된 후.

뒤에 있는 추론 제한

교체된 요소가 문서 트리의 일부로 렌더링되지 않는다는 사실에서 비호환성이 발생합니다. 대신 외부 개체로 렌더링되므로 브라우저가 그 앞이나 뒤에 추가 콘텐츠를 삽입하는 것이 불가능합니다.

DOM 구조의 예

비 -div 또는 범위와 같은 대체 요소, :before 및 :after 콘텐츠를 DOM 구조에 삽입할 수 있습니다. 예:

<span></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><before>Before Content</before>
Span Content
<after>After Content</after>

로그인 후 복사

결론

CSS :after 속성은 대체된 요소의 고유한 특성으로 인해 대체되지 않은 요소로 제한됩니다. 이렇게 하면 페이지에 렌더링된 콘텐츠가 일관되고 지정된 CSS 규칙을 준수할 수 있습니다.

위 내용은 CSS :after가 요소 뒤에 콘텐츠를 추가하지 못하는 경우는 언제입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!