Append content via multiple CSS :after classes

Question

Given the following HTML:

<div class="required">required only</div>
<div class="note">note only</div>
<div class="required note">required and note</div>
<div class="note required">note and required</div>

And CSS:

.required:after { content: " *"; color: red; }
.note:after { content: " +"; color: red; }

The result in Firefox 11 is:

required only *
note only +
required and note +
note and required +

Where more than one class is supplied (.required and .note) I would like to have both "*" and "+" appended to the element such that:

required and note *+
note and required +*

Is this possible using pure CSS, and if so, how?

Edit: Here's a link to jsfiddle for this example: http://jsfiddle.net/xpZST/

Answer 1

You'll need additional rules for this to work.

Given that the ordering of classes matters (when normally it shouldn't!), you'll need to use attribute selectors instead of class selectors, and you'll need to create two rules:

[class="required note"]:after { content: " *+"; color: red; }
[class="note required"]:after { content: " +*"; color: red; }

Simply add these rules after the ones you have and it should work, as attribute and class selectors are equally specific.

jsFiddle preview

By the way, if you have common styles you can keep your code DRY by isolating them in another rule. For example, you can select each class and give them both color: red:

.required:after, .note:after { color: red; }

jsFiddle preview