CSS pseudo-element size issue

Question

Please tell me why :before pseudo-element doesn't behave like a regular img in this case:

Left one is div with an img inside and img's width and height are equals 100% . Right one is div with :before and :before's width and height are also 100% , but effect is different!

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

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

Answer 1

Unfortunately you cannot control the size of the image when specifying it through content, But you can if you're using it as 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 this jsFiddle

And for your question why we can't style generated content: We can't because generated content is rendered into a generated box, and you can style that box, but not the content.

references:

1. check this post
2. another lengthy discussion on this subject

please notice that different browsers show very different behaviors.