Compatibilidad de pseudoelementos para ::before y ::after

En HTML5, ::before y ::after los pseudoelementos pueden mejorar elementos con contenido adicional, como iconos o marcas de verificación. Sin embargo, no todos los elementos son totalmente compatibles con estos pseudoelementos.

Elementos de entrada y ::after

En el ejemplo proporcionado, el pseudoelemento ::after no es mostrando en elementos de entrada. Esto se debe a que los elementos de entrada, similares a img y br, no tienen contenido de árbol de documentos. Según la especificación CSS2.1 (http://www.w3.org/TR/CSS21/generate.html), ::after solo funciona en elementos que tienen dicho contenido.

Por lo tanto, los elementos de entrada no pueden generar contenido usando ::after. Se pueden utilizar métodos alternativos, como el uso de imágenes de fondo o elementos personalizados, para lograr efectos similares en los campos de entrada.

Es importante considerar la compatibilidad específica de los elementos al utilizar pseudoelementos. La lista completa de elementos admitidos para ::before y ::after se puede encontrar en la especificación CSS. Al comprender las limitaciones y capacidades de los pseudoelementos, los desarrolladores pueden aplicarlos de manera efectiva para mejorar las interfaces de usuario sin encontrar comportamientos inesperados.