:before と :after 疑似要素が画像に対して確実に機能しないのはなぜですか?

画像で :before と :after を使用する際の課題

:before または :after 擬似的に画像 (img 要素) を強化しようとする場合要素を使用すると、開発者は予期しない動作に遭遇する可能性があります。この問題は、CSS 仕様の制限により発生します。

CSS 仕様では、::before と ::after が画像などの置換された要素とどのように相互作用するかについての包括的な定義が欠如していると明示的に記載されています。これは、img を使用したこれらの疑似要素の動作がブラウザによって異なる可能性があることを意味します。

解決策はありますか?

現時点では、疑似要素を作成する信頼できる方法はありません。画像と完全に互換性があります。ただし、次のような回避策が考えられます。

• img 要素を、div 要素または span 要素に適用された背景画像に置き換えます。
• JavaScript を使用して、目的の効果を実現する要素を作成および操作します。 .

将来的には、CSS 仕様のこれらの制限に対処し、次のような疑似要素の完全なサポートが可能になる可能性があります。画像。それまでは、開発者は代替ソリューションに頼る必要があります。

以上が:before と :after 疑似要素が画像に対して確実に機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。