title: Rating stars with content :after changing the stars also before?
body: <p>I have a woocommerce wordpress site with star rating of the products, that I tweaked to my needs, but I can't get the hovered star to light up all the stars before. As I saw, the css system can't target elements before, and jQuery can't target the :after element. How can I make it work?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;p class="stars"&gt;&lt;span&gt;
  &lt;a class="star-1" href="#"&gt;1&lt;/a&gt;
  &lt;a class="star-2" href="#"&gt;2&lt;/a&gt;
  &lt;a class="star-3" href="#"&gt;3&lt;/a&gt;
  &lt;a class="star-4" href="#"&gt;4&lt;/a&gt;
  &lt;a class="star-5" href="#"&gt;5&lt;/a&gt;
  &lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>p.stars a {
  border-right: none;
  width: auto;
  margin-right: 20px; 
  display: inline-block;
  text-indent: -9999px;
  position: relative;
  }
  
  #main-content-in p.stars a:after { content: "\e021";  }
  #main-content-in p.stars a:hover:after { content: "\e020"; }
  </code></pre>