html - CSS 伪元素大小问题

Question

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

左边是div一个img内部，img宽度和高度等于 100% 。右一个是divwith: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. 检查这篇文章
2. 关于这个主题的另一个冗长的讨论

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