title: How to use :empty pseudo-class and content property together?
body: <p>I <strong>wanted</strong> to use CSS3's <code>:empty</code> psedo-class and CSS3's <code>content</code> property together to add some text to empty lists as demonstrated in this fiddle:</p>
  <p><a href="http://jsfiddle.net/ZesAC/2/" rel="nofollow noreferrer">http://jsfiddle.net/ZesAC/2/</a></p>
  <p>I <strong>learned</strong> that CSS only allows <code>content</code> in <code>:after</code> or <code>:before</code> pseudo-elements. Is there a solution that allows styling of empty lists?</p>
  <hr />
  <p>As I learned in the comments, turns out you <em>can</em> use <code>content</code> anywhere in CSS3 (to no effect in the majority of browsers [as of 12/31/2012]) and only in <code>:after</code> and <code>:before</code> blocks in CSS2. (Thanks <a href="https://stackoverflow.com/users/106224/boltclock">@BoltClock</a>)</p>
  <p>If you don't mind being Firefox-specific, you can use the <code>-moz-only-whitespace</code> selector to make it behave a little more logically. (Thanks <a href="https://stackoverflow.com/users/8655/robertc">@robertc</a>)</p>