CSS `:before` 및 `:after`는 의사 요소 스타일 인라인 SVG를 사용할 수 있나요?

CSS :before 및 :after를 사용한 인라인 SVG 스타일 지정 의사 요소: 딜레마

:before 및 :after와 같은 CSS 의사 요소는 일반적으로 스타일 지정에 사용됩니다. HTML 요소를 인라인 SVG에 적용하면 독특한 문제가 발생합니다. 이 문제를 해결하려면 대체된 요소와 생성된 콘텐츠의 미묘한 차이를 이해하는 것이 중요합니다.

대체된 요소로서의 인라인 SVG

인라인 SVG는 일반적으로 HTML에서 대체된 요소로 처리됩니다. 대체 요소는 텍스트를 이미지나 비디오와 같은 외부 개체로 대체하는 요소입니다. 단일 단위로 표시되며 텍스트 노드를 포함할 수 없습니다.

:before 및 :after 의사 요소로 생성된 것과 같은 CSS 생성 콘텐츠는 인라인 요소에만 적용될 수 있기 때문에 이러한 구별이 중요합니다. . 인라인 요소는 주변 텍스트와 함께 흐르며 텍스트 노드를 포함할 수 있습니다.

생성된 콘텐츠 및 대체 요소

CSS :before 및 :after 의사 요소는 생성된 콘텐츠를 생성합니다. 선택기와 일치하는 요소에 삽입됩니다. 그러나 인라인 SVG는 요소를 대체하므로 생성된 콘텐츠를 요소에 추가할 수 없습니다. 이는 콘텐츠가 요소 내부에 추가되고 대체된 요소가 중첩된 콘텐츠를 허용하지 않기 때문입니다.

대체 접근 방식

이 제한을 극복하기 위해 대체 접근 방식을 모색할 수 있습니다.

• 의사 요소가 포함된 외부 SVG: SVG를 외부 파일로 로드하고 CSS를 사용하는 것이 좋습니다. 대신 상위 요소에 콘텐츠를 삽입합니다.
• 래퍼 요소: 포함 div에 인라인 SVG를 래핑하고 SVG 자체 대신 래퍼에 의사 요소를 적용합니다.

W3C 제안 솔루션: :outside Pseudo-Element

W3C 문서에서, "CSS3 생성 및 대체 콘텐츠 모듈", :outside라는 의사 요소가 도입되었습니다. :outside를 사용하면 생성된 콘텐츠를 연결된 대체 요소 외부에 배치할 수 있어 잠재적으로 인라인 SVG 스타일 지정을 위한 솔루션을 제공할 수 있습니다. 그러나 이 기능은 널리 구현되지 않았으며 모든 브라우저에서 지원되지 않을 수 있다는 점에 유의하는 것이 중요합니다.

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