[css3-content] "content" property, replaced elements, and width

The Generated and Replaced Content spec specifies that in some cases
the 'content' property causes the element to act like a replaced
element.  Specifically, if the content block in question is nothing
but a url() value, it acts like a replaced element; otherwise, it
merely contains the content (frex, it it is "content: 'Hello '
url(world.jpg);").

This is the most sensical behavior, as it allows an author to control
the size of the image just as if it were an <img> element.  Without
this, the image pointed to by url() is just an anonymous replaced
element *inside* the element with the 'content' property, which can't
be resized like an <img> can.

Unfortunately, every browser I have at hand gives the latter behavior
for ::before and ::after pseudoelements, where the following:

p::before {
  content: url(image);
  display: inline;
  width: 50px;
}

...creates an anonymous replaced element *inside of* the ::before
pseudo, and so the width is ignored.  If you set display:inline-block
the ::before respects the width, but the image still doesn't, and
simply overflows the box.

CSS 2.1 was not at all clear on how this should work.  The current
behavior, though, is almost certainly *not* what we want when
'content' applies to all elements.  What are the feelings of
implementors on the possibility of changing the behavior here?

~TJ

Received on Friday, 7 May 2010 19:33:09 UTC