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

CSS :before および :after 擬似要素を使用したインライン SVG のスタイリング: ジレンマ

スタイリングには :before や :after などの CSS 擬似要素がよく使用されますが、 HTML 要素をインライン SVG に適用すると、独特の課題が生じます。この問題を解決するには、置換された要素と生成されたコンテンツのニュアンスを理解することが重要です。

置換された要素としてのインライン SVG

インライン SVG は通常、HTML で置換された要素として扱われます。置換要素とは、テキストを画像やビデオなどの外部オブジェクトに置き換える要素です。これらは単一のユニットとして表示され、テキスト ノードを含めることはできません。

CSS で生成されたコンテンツ (:before および :after 擬似要素によって作成されたものなど) はインライン要素にのみ適用できるため、この区別は重要です。 。インライン要素は周囲のテキストとともに流れる要素であり、テキスト ノードを含めることができます。

生成されたコンテンツと置換された要素

CSS の :before および :after 擬似要素は、生成されたコンテンツを作成します。セレクターによって一致した要素に挿入されます。ただし、インライン SVG は置換要素であるため、生成されたコンテンツを追加することはできません。これは、コンテンツが要素内に追加され、置換された要素ではネストされたコンテンツが許可されないためです。

代替アプローチ

この制限を克服するには、次の代替アプローチを検討できます。

• 擬似要素を含む外部 SVG: SVG を外部ファイルとしてロードし、次を使用することを検討してください。代わりに親要素にコンテンツを挿入する CSS。
• ラッパー要素: インライン SVG を含む div でラップし、SVG 自体ではなく疑似要素をラッパーに適用します。

W3C 提案されたソリューション: :outside擬似要素

W3C ドキュメント「CSS3 Generated and Replaced Content Module」では、:outside と呼ばれる擬似要素が導入されています。 :outside を使用すると、生成されたコンテンツを関連付けられた置換要素の外側に配置できるようになり、インライン SVG のスタイルを設定するためのソリューションが提供される可能性があります。ただし、この機能は広く実装されておらず、すべてのブラウザでサポートされているわけではないことに注意することが重要です。

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