title: jQuery addClass causes no effect
body: <p>I have a class where I want to change a single attribute with a javascript function. </p>
  
  <pre><code>.msg_archivedropdown:before {
      content:"";
      display: block;
      position:absolute;
      width:0;
      height:0;
      left:-7px;
      top:0px;
      border-top: 10px solid transparent;
      border-bottom:10px solid transparent;
      border-right:7px solid #FFFFFF; 
  }
  </code></pre>
  
  <p>I'm already using jQuery, so I've tried to do it with <code>addClass</code>: </p>
  
  <pre><code>function colorbubble(){
      $("archivedropdown before").addClass("msg_archivedropdownhover before");
  }
  </code></pre>
  
  <p>The added class looks like this, only the border color changes: </p>
  
  <pre><code>.msg_archivedropdownhover:before {
      content:"";
      display: block;
      position:absolute;
      width:0;
      height:0;
      left:-7px;
      top:0px;
      border-top: 10px solid transparent;
      border-bottom:10px solid transparent;
      border-right:7px solid #DFDFDF;
  }
  </code></pre>
  
  <p>Sadly, there's nothing changing. I've tried various kind of ways so far. I've tried to do it with: </p>
  
  <pre><code>$('.msg_archivedropdown before').css('border-right-color','#DFDFDF;');
  </code></pre>
  
  <p>Which got me nowhere and I also tried to loop through a <code>getElementsbyClass</code> which did not work either. I´m doing something wrong. Can someone please give me a hint? Thank you.</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>It's a speech-bubble where I made a triangle in the <code>.msg_archivedropdown:before</code>-class. On a <code>mouseover</code> event I want to change the color of the triangle as well. So I only want to change the color of the <code>.msg_archivedropdown:before</code> class. </p>