::before および ::after の擬似要素の互換性

HTML5 では、::before および ::after 擬似要素で次のことができます。アイコンやチェックマークなどの追加コンテンツで要素を強化します。ただし、すべての要素がこれらの疑似要素を完全にサポートしているわけではありません。

入力要素と ::after

この例では、::after 疑似要素はサポートされていません。入力要素に表示します。これは、img や br と同様に、input 要素にはドキュメント ツリーのコンテンツが含まれないためです。 CSS2.1 仕様 (http://www.w3.org/TR/CSS21/generate.html) によると、::after はそのような内容を持つ要素に対してのみ機能します。

したがって、入力要素は機能しません。 ::after を使用してコンテンツを生成します。背景画像やカスタム要素の使用などの代替方法を利用して、入力フィールドで同様の効果を実現できます。

疑似要素を使用する場合は、要素固有の互換性を考慮することが重要です。 ::before および ::after でサポートされている要素の完全なリストは、CSS 仕様に記載されています。疑似要素の制限と機能を理解することで、開発者はそれらを効果的に適用して、予期しない動作が発生することなくユーザー インターフェイスを強化できます。