CSS에서 의사 요소 스타일 인라인 SVG 이전 및 이후를 사용할 수 있나요?

CSS :before 및 :after 의사 요소를 사용하여 인라인 SVG 스타일 지정

소개

CSS :before 및 :after 의사 요소는 일반적으로 장식 요소를 사용하여 HTML 요소를 향상하는 데 사용됩니다. 또는 기능적 내용. 그러나 인라인 SVG 요소의 경우 이러한 의사 요소를 적용하는 데 문제가 발생할 수 있습니다. 이 문서에서는 이것이 어려운 이유를 살펴보고 잠재적인 솔루션을 제공합니다.

대체 콘텐츠로서의 SVG

인라인 SVG 요소는 대체 콘텐츠로 간주됩니다. 그들이 참조하는 요소입니다. 이 동작은 SVG를 포함한 모든 이미지 유사 요소에 내재되어 있습니다. 결과적으로 :before 및 :after에 의해 생성된 콘텐츠와 같은 생성된 콘텐츠는 교체된 요소 내에서 허용되지 않습니다.

:before 및 :after가 SVG에서 실패하는 이유

MDN 문서에는 :before 및 :after를 사용하여 생성된 요소가 "익명 대체 요소"라고 명시되어 있습니다. 교체된 콘텐츠는 생성된 콘텐츠를 포함할 수 없으므로 인라인 SVG에 :before 및 :after를 적용하는 것이 효과적이지 않은 이유를 설명합니다.

잠재적 솔루션 - :outside Pseudo-Element

An "CSS3 생성 및 대체 콘텐츠 모듈"이라는 제목의 CSS 초안 문서에 흥미로운 솔루션이 제안되어 있습니다. 이 문서에서는 생성된 콘텐츠를 교체된 요소 외부에 배치하는 새로운 의사 요소인 :outside를 소개합니다. :outside를 활용하면 인라인 SVG와 함께 사용할 때 :before 및 :after의 한계를 극복할 수 있습니다.

결론

CSS를 사용하는 동안 : 인라인 SVG의 의사 요소 전후는 일반적으로 지원되지 않습니다. :외부 의사 요소는 생성된 콘텐츠를 SVG 요소 근처에 배치하기 위한 잠재적인 솔루션을 제공합니다. 개발자는 CSS 스타일을 디자인할 때 인라인 요소와 대체 요소의 차이점을 알고 있어야 합니다.

위 내용은 CSS에서 의사 요소 스타일 인라인 SVG 이전 및 이후를 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!