title: using :before with option element in a drop down list
body: <p>I am trying to add content to the selected option in a drop down list using css, when the drop down is closed. Specifically I want the drop down to say </p>
  
  <p>Sort by: Option1</p>
  
  <p>when closed and when you open the drop down you then see Option 1, Option 2 etc</p>
  
  <p>I found this:</p>
  
  <p><a href="https://stackoverflow.com/questions/8619406/css-selected-pseudo-class-similar-to-checked-but-for-for-select-elements">CSS :selected pseudo class similar to :checked, but for &lt;select&gt; elements</a></p>
  
  <p>which shows how to apply a style to the right thing, but when I try and apply :before to the option element, nothing appears, in any circumstances. That is, I cannot seem to use the </p>
  
  <pre><code>option:before{
   content:"before option"
  }
  </code></pre>
  
  <p>as a rule to any effect.</p>
  
  <p>Is this always the case for option elements? I also found that I could not wrap option text in span classes, so I can't do it that way. </p>