CSS taille pseudo-élément question

Question

S'il vous plaît me dire pourquoi :before pseudo-élément ne se comporte pas comme un img régulier dans ce cas:

gauche est div avec un img intérieur et img l » la largeur et la hauteur sont égales à 100%. Le droit est div avec :before et :before la largeur et la hauteur sont également 100%, mais l'effet est différent!

(je sais que je peux utiliser une solution de contournement background-image, mais ce qui ne va pas avec :pseudo lorsque sa content propriété est url()?)

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

Answer 1

Malheureusement vous ne pouvez pas contrôler la taille de l'image lors de la spécification à travers le contenu, Mais vous pouvez si vous l'utilisez comme arrière-plan:

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

vérifier ce jsFiddle

Et pour votre question de savoir pourquoi nous ne pouvons pas le style du contenu généré par: Nous ne pouvons pas parce que le contenu généré est rendu dans une boîte générée, et vous style peut cette boîte, mais pas le contenu.

Références:

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

s'il vous plaît avis que les différents navigateurs montrent des comportements très différents.