Why Doesn\'t My Image Display in Firefox When Using the CSS `content` Property?

Firefox Browser Image Display Issue

In an attempt to display an image within a CSS class, the content property was utilized:

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

While this approach proved effective in rendering the image on Google Chrome and Safari, an unexpected problem emerged in Firefox: the image failed to display.

Resolution:

The issue lies in Firefox's implementation of the content property, which is primarily compatible with the ::before and ::after pseudo-elements. To rectify the situation, the CSS code can be modified as follows:

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

By utilizing the ::before pseudo-element, you can successfully display the image in Firefox as well. Refer to the provided documentation link for further insights into the content property's usage:

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

The above is the detailed content of Why Doesn\'t My Image Display in Firefox When Using the CSS `content` Property?. For more information, please follow other related articles on the PHP Chinese website!