html - CSS 伪元素大小问题

Question

请告诉我为什么 :before 伪元素在这种情况下不像常规 img 那样:

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

(我知道我可以使用 background-image 解决方法，但是当 content 属性为 时 :pseudo 出了什么问题>url() ?)

fiddle :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

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