Can not insert css image into pseudo :before
<p>I am trying to insert a background image into a header:before element, but jquery fails.</p>

<p><strong>HTML</strong>
     
       content
     </p>

<pre><code> &lt;a href="image.jpg" class="image-source"&gt;Try insert image into .header:before&lt;/a&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code> $('.image-source').click(function() {
   var src = $(this).attr('href');
    // slash is okay
    $('.header:before').css('backgroundImage', 'url(/' + src + ')'); 
    return false;
 });
</code></pre>

<p>CSS:</p>

<pre><code>.header {
  position: relative;
  background: url(anotherimage.jpg) no-repeat;
}
.header:before  {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  min-width:50%;
  min-height:50%;
  content: "";
}
</code></pre>

<p>Does anyone know if I am dealing with a bug here, or missed an obvious?
Note, I can not use <code>.header</code> itself, because I am working with multiple background image, thats why I need <code>:before</code>.</p>

<p><strong>UPDATE:</strong> 
Might be this:</p>

<ul>
<li><p><a href="http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#x2" rel="nofollow">http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#x2</a></p></li>
<li><p><a href="http://stackoverflow.com/questions/5814810/target-before-and-after-pseudo-elements-with-jquery#comment6671974_5814824">Target :before and :after pseudo-elements with jQuery</a></p></li>
</ul>
