W3C home > Mailing lists > Public > www-style@w3.org > February 2015

[CSS21][css-content] Resizing pseudo-elements with content: url()

From: Daniel Tan <lists@novalistic.com>
Date: Wed, 18 Feb 2015 16:58:25 +0800
Message-ID: <54E45431.8030101@novalistic.com>
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
Received on Wednesday, 18 February 2015 08:58:50 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:51 UTC