In CSS2.1, an element can contain only at most one of pseudo-elements of any type at any time. (This means that an element can have both a pseudo-element :before and :after - it simply cannot have more than one type.)
As a result, when you have several :before rules that correspond to the same element, they will all be cascaded and applied to the same :before pseudo-element, as well as to the normal element. In your example, the end result is as follows:
.circle.now:before { content: "Now"; font-size: 19px; color: black; }
As you can see, only the highest priority content declaration (as mentioned above) takes effect, the rest of the declarations are discarded, as with any other CSS property.
This behavior is described in the CSS2.1 Selectors section :
Pseudo-elements behave like real elements in CSS with the exceptions described below, and elsewhere.
This means that pseudo-element selectors work like selectors for ordinary elements. It also means that the cascade should work the same. Oddly enough, CSS2.1 seems to be the only link; neither css3-selectors nor css3-cascade mention this at all, and it remains to be seen whether it will be clarified in a future specification.
If an element can match more than one selector with the same pseudo-element, and you want them all to apply in some way, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should in such cases. I cannot provide a complete example, including the content property here, as it is not clear, for example, whether the first or first character or text should. But the selector you need for this combined rule, either .circle.now:before , or .now.circle:before - whichever selector you choose is a personal preference, since both selectors are equivalent, this is only the value of the content property, which you will need to determine yourself.
If you still need a specific example, see my answer to this similar question .
The inherited css3 content specification contains a section on inserting several ::before and ::after pseudo-elements using CSS2.1 cascade compatible notation, but note that this particular document is deprecated - it has not been updated since 2003, and no one has implemented this function over the last decade. The good news is that an abandoned document is actively being rewritten under the guise of css-content-3 and css-pseudo-4 . The bad news is that the multiple function of pseudo-elements is not found anywhere in any specification, apparently, again because it is not of interest.