CSS trickery -- how can I apply hover "fill" on current svg and previous svg siblings

I'm looking for a way to fill in current element and previous sibling elements based on hover. I'm working with handlebars (through Ember) and normal CSS. Here's some code for context --

order-feedback-stars.hbs - this renders 5 stars, empty or filled based on if the tag is clicked

<div class="feedback-star-container">
  
    <a  class="feedback-star">
      
        
      
        
      
    </a>
  
</div>

I've been experimenting with different CSS classes and selectors, but all I've been able to do is highlight just the element that I'm hovering over with the following CSS --

feedback.scss

svg:hover {
   fill: #1F4F46;
 }

Here is what the stars look like. If I hover over the 5th star, then the expected result is that all the previous stars get filled in green. Some advice would be much appreciated -- thanks so much!