CSS :before および :after 疑似要素でインライン SVG のスタイルを設定できますか?

CSS :before および :after 擬似要素を使用したインライン SVG のスタイル

概要

CSS :before および :after 擬似要素は、一般的に機能強化に使用されます。装飾的または機能的なコンテンツを含む HTML 要素。ただし、インライン SVG 要素に関しては、これらの疑似要素を適用すると課題が発生する可能性があります。この記事では、それが難しい理由を検討し、潜在的な解決策を示します。

置換されたコンテンツとしての SVG

インライン SVG 要素は置換されたコンテンツとみなされます。つまり、インライン SVG 要素は、元のコンテンツを置き換えます。彼らが参照する要素。この動作は、SVG を含むすべての画像のような要素に固有のものです。したがって、:before や :after によって作成されたコンテンツなど、生成されたコンテンツは、置換された要素内では許可されません。

SVG で :before と :after が失敗する理由

MDN ドキュメントには、:before および :after を使用して作成された要素は「匿名で置換された要素」であると記載されています。置換されたコンテンツには生成されたコンテンツを含めることはできないため、インライン SVG に :before と :after を適用することが効果がない理由が説明されています。

潜在的な解決策 - :outside Pseudo-Element

An興味深い解決策は、「CSS3 Generated and Replaced Content Module」というタイトルの CSS ドラフト文書で提案されています。このドキュメントでは、生成されたコンテンツを置換された要素の外側に配置する新しい疑似要素 :outside を導入します。 :outside を利用することで、インライン SVG で使用する場合の :before と :after の制限を克服できる可能性があります。

結論

CSS の使用中:インライン SVG の before および :after 疑似要素は通常サポートされていません。:outside 疑似要素は、生成された疑似要素を配置するための潜在的な解決策を提供します。 SVG 要素に隣接するコンテンツ。開発者は、CSS スタイルを設計するときに、インライン要素と置換要素の違いに注意する必要があります。

以上がCSS :before および :after 疑似要素でインライン SVG のスタイルを設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。