CSS 伪元素大小问题

Question

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

左侧是一个内部带有 img 的 div，img 的宽度和高度均为 100%。右侧是一个带有 :before 的 div，:before 的宽度和高度也为 100%，但效果不同！

（我知道我可以使用 background-image 来解决此问题，但当其 content 属性为 url() 时，:pseudo 存在什么问题吗？）

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

- Ivan Chernykh

---

我对此感到困惑，但似乎width和height不适用于通过url()插入的图像，请参见https://dev59.com/RGUp5IYBdhLWcg3w5Kg6。 - xec

@xec 感谢 Tomzan，发现了这个链接：http://lists.w3.org/Archives/Public/www-style/2011Nov/thread.html#msg451 - Ivan Chernykh

请注意，如果您选择使用display: inline;，则无法控制width。 - connexo

Answer 1

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

.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. 关于这个主题的另一个长时间的讨论

请注意，不同的浏览器显示非常不同的行为。

- Tomzan