title: Why the :before and :after pseudo-elements work only in Firefox?
body: <p>I've created a <code>select</code> list with options having <code>:after</code> and <code>:before</code> pseudo-elements - <a href="http://jsfiddle.net/V8cvQ/3/" rel="nofollow"><strong>DEMO</strong></a></p>
  
  <pre class="lang-css prettyprint-override"><code>option:after, option::before {
      content: " ";
      height: 5px;
      width: 5px;
      background: #c00;
      border-radius: 5px;
      display: inline-block;
  }
  </code></pre>
  
  <p>However this works in Firefox only and no other browser. </p>
  
  <p>As it stated on <a href="http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content" rel="nofollow">W3C</a>, <a href="https://developer.mozilla.org/en-US/docs/CSS/%3a%3aafter?redirectlocale=en-US&amp;redirectslug=CSS%2F%3Aafter" rel="nofollow">MDN</a>, <a href="http://reference.sitepoint.com/css/pseudoelement-after" rel="nofollow">SitePoint</a> the <code>:after</code> is a "<em>pseudo-element rendered after the matched element and used to add cosmetic content</em>" and nobody states <strong>any</strong> restriction about elements it can't be applied to.</p>
  
  <p>Question - why all the browsers (except FF) can't properly display the pseudo-elements? 
  Any documentation is greatly appreciated. </p>