- From: Daniel Tan <lists@novalistic.com>
- Date: Wed, 18 Feb 2015 16:58:25 +0800
- To: www-style@w3.org
As far as I'm aware, it is not possible to resize an image that is rendered using content: url() on a ::before or ::after pseudo-element: .foo::before { content: url(http://placehold.it/500x500); width: 200px; height: 200px; } The image is rendered as-is, with its intrinsic dimensions as specified by the contents of the resource, if any. The width and height properties do not apply even though it appears to result in a replaced element. Section 3 of css-content states the following, which is in line with what I would expect: > If the computed value of the part of the content property that ends > up being used is a single URI, then the element or pseudo-element is > a replaced element. However, CSS2.1 says nothing at all about replaced elements in the section on content: url(), which leads me to believe this is new to level 3. In fact, current implementation behavior shows that the replaced content is rendered as a child of the pseudo-element box, not the pseudo-element box itself, and therefore box model properties never apply to the replaced content. Setting display and some of those properties exemplifies this: .foo::before { content: url(http://placehold.it/500x500); display: block; width: 200px; height: 200px; border: medium solid red; overflow: auto; } (Interestingly, the scrollbars generated by these pseudo-elements seem to be partially broken in all browsers, e.g. they don't respond to certain user input -- I'm guessing this is because pseudo-elements can't have focus.) While I know I can resize the image by using background-size instead of using the content property, I'm more interested in understanding how implementations arrive at this behavior in the first place, as it does not appear to be documented explicitly in CSS2.1. Is there something I'm missing elsewhere that describes this, or is it under-specified and thus only addressed in css-content? -- Daniel Tan NOVALISTIC <http://NOVALISTIC.com>
Received on Wednesday, 18 February 2015 08:58:50 UTC