CSS wielkość pseudo-element problem

Question

Proszę mi powiedzieć, dlaczego :before pseudo-element nie zachowuje się jak zwykły img w tym przypadku:

, lewy div z img wewnątrz i img „s szerokość i wysokość są równe 100%. Prawy to div o szerokości i wysokości :before i :before również 100%, ale efekt jest inny!

(wiem, mogę użyć background-image obejście, ale to, co jest nie tak z :pseudo gdy jego content nieruchomość jest url()?)

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

Answer 1

Niestety nie można kontrolować wielkość obrazu przy określaniu to dzięki zawartości, Ale może jeśli używasz go jako tło:

.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; 
} 

czeku to jsFiddle

I za to pytanie, dlaczego nie możemy styl generowanej treści: Nie możemy, ponieważ wygenerowane treść wydanego w generowanym polu, a ty może styl że pudełko, ale nie treści.

referencje:

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

Proszę zauważyć, że różnych przeglądarek pokazują bardzo różne zachowania.