Mostrando imágenes con URL de contenido en Firefox

Se ha encontrado un problema cuando ciertos navegadores, específicamente Firefox, no muestran imágenes al hacerlas referirlas usando la propiedad de contenido. Esto se puede ver en la clase CSS proporcionada:

.googlePic {
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float: right;
    height: 19px;
}

Si bien este CSS funciona como se esperaba en Google Chrome y Safari, no representa ninguna imagen en Firefox.

Solución:

La propiedad de contenido solo se puede usar con pseudo-elementos como :: Para resolver el problema, necesitamos modificar nuestra clase CSS de la siguiente manera:

.googlePic::before {
    content: url('../../img/googlePlusIcon.PNG');
}

explicación:

La propiedad de contenido funciona insertando contenido antes o después de un elemento. Al usar :: antes, estamos insertando la imagen antes del elemento .googlePic, que permite a Firefox mostrarla correctamente.

Lectura adicional:

para obtener más información sobre la propiedad de contenido, consulte esto Artículo:

• http://www.htmldog.com/reference/cssproperties/content/

nota: