0

Css:

.woocommerce-placeholder.wp-post-image {
    content: url("DSC0926-1.jpg");
}

/*for firefox*/
.woocommerce-placeholder.wp-post-image::before {
    content: url("DSC0926-1.jpg");
}

HTML

<img src="placeholder.png" alt="Placeholder" class="woocommerce-placeholder wp-post-image" scale="0" width="100" height="100">

I am trying to replace the placeholder image via CSS. It works in Chrome and Safari, but the ::before fix that I put for Firefox, doesn't work. Why is that?

P.S. I know similar questions have been posted before but I have tried all those solutions like :after and content: ''; background: url('DSC0926-1.jpg'); instead of changing content url is not working either.

user10093863
  • 25
  • 7
  • Does this answer your question? [CSS :after not adding content to certain elements](https://stackoverflow.com/questions/6949148/css-after-not-adding-content-to-certain-elements) – Kaiido Dec 11 '19 at 07:28

1 Answers1

0

This may be because

The pseudo-elements generated by ::before and ::after are contained by the element's formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.

as mentioned in https://developer.mozilla.org/en-US/docs/Web/CSS/::before

W3C specification suggests that

Note: This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Arun Dhungel
  • 1
  • 1