CSS pseudo-element size issue

Question

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

enter image description here

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/

I am befuddled by this, but it looks like `width` and `height` simply does not apply to images inserted through `url()`, see http://stackoverflow.com/questions/14978807 — xec, Aug 28 '13 at 08:14
@xec thanks to Tomzan , found this: http://lists.w3.org/Archives/Public/www-style/2011Nov/thread.html#msg451 — Ivan Chernykh, Aug 28 '13 at 08:30
Also note that you cannot control `width` if you chose to make `display: inline;`. — connexo, Nov 17 '15 at 17:14

score 4 · Accepted Answer · edited Aug 30 '14 at 02:33

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('https://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:

please notice that different browsers show very different behaviors.

CSS pseudo-element size issue

1 Answers1

Linked