Problem: Safari improperly handles generated content in certain cases when used with multiple class names

When referencing an element by two class names simultaneously, Safari won't generate content (using :before or :after) within the element.

Assume we have a div with two class names: box and one. Within that div, we have a p (paragraph) tag, after which we'd like to insert generated content. One way to do so would be the following:

div.box.one p:after{ content:'generated content here!'; }

But that doesn't work in Safari. However, if you drop one of the class names, as shown below, it works as expected:

div.box p:after{ content:'generated content here!'; }

Note also that the bug only applies to content within the classed element — generating content before or after the element itself works fine:

div.box.one:after{ content:'generated content here!'; }

Example (view source to see CSS and HTML):

Both boxes below should contain generated content (in green):

Box 1

This box should contain the text "generated content" in CSS2-compliant browsers (but won't in Safari).

Box 2

This box should contain the text "generated content" in CSS2-compliant browsers, including Safari.