CSS pseudo element issue

Question

Please tell me why :before pseudo-element does not behave like a regular img in this case:

On the left is one div with img inside and img width and height are 100%. The right one is a div with :before and :before width and height are also 100%, but the effect is different!

(I know I can use the background-image workaround, but what is wrong with :pseudo when its content url() property?)

Fiddle: http://jsfiddle.net/Tp9JG/4/

Answer 1

Unfortunately, you cannot control the size of the image when specifying it through the content, but you can, if you use it as a background:

 .with_before:before{ content:''; background-image: url('http://i.stack.imgur.com/CAAFj.jpg'); background-size: 100% 100%; width: inherit; height: inherit; display: inline-block; } 

check jsFiddle

And for your question, why we can’t generate the generated content: We can’t, because the generated content is displayed in the generated field, and you can style this field, but not the content.

links:

• check this message
• another lengthy discussion on this topic

note that different browsers have very different behaviors.