CSS 伪元素大小问题

Question

请告诉我为什么:before 伪元素在这种情况下不像普通的img：

左边是div，里面有一个img，img的宽度和高度等于100%。右边是div 和:before 和:before 的宽高也是100%，但是效果不一样！

（我知道我可以使用background-image 解决方法，但是当:pseudo 的content 属性为url() 时有什么问题？）

小提琴：http://jsfiddle.net/Tp9JG/4/

Answer 1

很遗憾，通过内容指定图像时，您无法控制图像的大小， 但是，如果您将其用作背景，则可以：

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

查看jsFiddle

对于您的问题，为什么我们不能为生成的内容设置样式： 我们不能，因为生成的内容会渲染到生成的盒子中，您可以设置该盒子的样式，但不能设置内容的样式。

参考：

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

请注意，不同的浏览器表现出非常不同的行为。