How to use :empty pseudo-class and content property together?

Issue

I wanted to use CSS3's :empty psedo-class and CSS3's content property together to add some text to empty lists as demonstrated in this fiddle:

http://jsfiddle.net/ZesAC/2/

I learned that CSS only allows content in :after or :before pseudo-elements. Is there a solution that allows styling of empty lists?

---

As I learned in the comments, turns out you can use content anywhere in CSS3 (to no effect in the majority of browsers [as of 12/31/2012]) and only in :after and :before blocks in CSS2. (Thanks @BoltClock)

If you don't mind being Firefox-specific, you can use the -moz-only-whitespace selector to make it behave a little more logically. (Thanks @robertc)

Solution

Turns out I answered my own question in the asking:

http://jsfiddle.net/M6xZj/2/

You can use :after with the :empty element to add something after the UL. It is empty, after all, so it's guaranteed to be located where the list was.

Answered By - Chris Pfohl