CSS `:before`가 인라인 SVG 요소에서 작동하지 않는 이유는 무엇입니까?

인라인 SVG의 CSS :before

소개

:before 및 :after 의사 요소를 사용하여 인라인 SVG 요소 스타일을 지정하는 것은 웹에서 일반적인 작업입니다. 개발. 그러나 SVG를 포함하여 대체 요소에 적용되는 제한 사항을 이해하는 것이 중요합니다.

문제

주어진 코드 예제에서는 SVG 요소에 적용된 :before 스타일이 반영되지 않습니다. 생성된 콘텐츠가 SVG에 적용되지 않을 수 있음을 나타냅니다.

대체된 요소 및 생성된 콘텐츠

인라인 SVG는 대체된 것으로 간주됩니다. 요소는 콘텐츠 흐름의 일부가 아니라 상위 요소를 대신한다는 의미입니다. 반면 생성된 콘텐츠는 :before 및 :after와 같은 의사 요소를 사용하여 문서 트리에 삽입된 콘텐츠입니다.

CSS 사양

CSS에서 생성된 콘텐츠에 대한 사양은 "CSS3 생성 및 대체 콘텐츠 모듈." 이 문서에 따르면 생성된 콘텐츠는 대체된 요소 내에 허용되지 않습니다. 이는 예제에서 SVG에 대한 :before 스타일링의 실패를 설명합니다.

가능한 해결책: :outside 의사 요소

생성된 콘텐츠는 대체된 요소 내에서 지원되지 않지만 W3C 문서는 인용된 해결책은 :outside 의사 요소입니다. 이 의사 요소는 생성된 콘텐츠를 교체된 요소 외부에 배치하여 제한 사항을 효과적으로 우회합니다. 불행하게도 :outside에 대한 지원은 현재 제한되어 있습니다.

결론

교체된 요소에 적용되는 제한으로 인해 :before 또는 :after를 사용한 인라인 SVG 스타일 지정은 불가능합니다. 이 문제를 해결하려면 클래스나 속성을 사용하여 원하는 스타일로 요소를 동적으로 추가하는 등의 대체 방법을 살펴보세요.

위 내용은 CSS `:before`가 인라인 SVG 요소에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!