Content url does not display image on firefox browser

The content property works with ::before and ::after.

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

Read this: http://www.htmldog.com/reference/cssproperties/content/

IE8 only supports the content property if a !DOCTYPE is specified.


I know this may be a late response, but i came across the same problem.

I looked it up and somehow an url is not a valid 'content' type and even tho Chrome and Safari are being the good guys and show it nicely.

What worked for me, was creating an empty 'content' and using a background to show the image: it works nicely in Chrome, Firefox, Safari and IE8+9

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

edit: forgot to put the :before after the classname


you have to write two css class in style

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

}

.googlePic: after
{  /*this for firefox browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

and its works for me :)