评分明星的内容：之前改变星星？

Question

我有一个具有产品星级评级的woocommerce wordpress网站，我根据自己的需要进行了调整，但我无法让这颗悬垂的星星照亮所有的星星。正如我所看到的，css系统之前不能定位元素，jQuery无法定位：after元素。我怎样才能使它发挥作用？

HTML：

<p class="stars"><span>
<a class="star-1" href="#">1</a>
<a class="star-2" href="#">2</a>
<a class="star-3" href="#">3</a>
<a class="star-4" href="#">4</a>
<a class="star-5" href="#">5</a>
</span></p>

CSS：

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"; }