element size issue

Please tell me why :before pseudo-element doesn't behave like a regular img in this case:

Left one is div with an img inside and img 's width and height are equals 100% . Right one is div with :before and :before 's width and height are also 100% , but effect is different!

(I know i can use a background-image workaround , but what is wrong with :pseudo when its content property is url() ?)

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

---

Unfortunately you cannot control the size of the image when specifying it through content, But you can if you're using it as background:

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

check this jsFiddle

And for your question why we can't style generated content: We can't because generated content is rendered into a generated box, and you can style that box, but not the content.

references:

check this post

another lengthy discussion on this subject

please notice that different browsers show very different behaviors.

链接地址: http://www.djcxy.com/p/73980.html

上一篇: 有没有办法将数组传递给currentEnd在EmberJS中？

下一篇: 元素大小问题