Navegadores que soportan los pseudo-elementos :before y :after

Los pseudo-selectores en css, como las pseudo-classes y pseudo-elementos, son elementos presentes en el css que permiten extender las posibilidades a la hora de aplicar tal o cual estilo a algún elemento html, por ejemplo, para poder aplicar un efecto a la primera letra de algún texto, primera línea, o para agregar alguna información o estilo delante o detrás de un elemento. Para esto es que existen los pseudo-elementos :first-letter, :first-line, :before y :after, y estos últimos son los que nos convocan en ésta oportunidad.

La verdad es que desde hace algún tiempo que tenía la duda sobre la compatibilidad y soporte que tenían algunos que se dicen navegadores para estos elementos, y justamente los de css-tricks han hecho una lista con los navegadores más utilizados y su soporte para éstos elementos, la cual revela que Chrome sigue siendo el mejor de los mejores e IE sigue siendo IE.

El estudio se basó en probar esta página en distintos navegadores, revisando si funcionaba como debía funcionar o no, y los resultados fueron los siguientes:

firefox 3.5 y superior Soportado
Bonos: Firefox 4 permite hacer transiciones entre ellos
3.0 e inferiores Soporte Parcial
No soporta position o float en los elementos.
safari Prueba: 4 y superiorAparentemente: 1.3 y superior Soportado
chrome Todas las Versiones Soportado
opera 6 y superior Soportado
internet explorer 9 y superior Soportado
8 Soporte Parcial
z-index no respetado, se necesita usar un doctype, y declarar el estado a:hover si se utiliza :hover:after ó :hover:before
7 e inferiores Adivine 😉

Niveles de Soporte

En conclusión, y tomando como guía el reporte estadístico de uso de los navegadores de abril de la w3schools se obtiene cerca de un 92% de soporte y compatibilidad para estos pseudo-elementos. Nada mal, si se piensa que Firefox y Chrome son, por ahora, los navegadores más utilizados.

Saludos.

Como lo vió en: CSS-TricksBrowser Support for :before/:after Pseudo Elements