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('https://i.stack.imgur.com/CAAFj.jpg');
    background-size: 100% 100%;
    width: inherit;
    height: inherit;
    display: inline-block;
}

检查这个jsFiddle

对于您的问题，为什么我们无法设置生成内容的样式：我们不能，因为生成的内容被渲染到生成的框中，并且您可以设置该框的样式，但不能设置内容的样式。

参考：

1. 检查这个帖子
2. 关于这个主题的另一个冗长的讨论

请注意，不同的浏览器显示出截然不同的行为。