Drawback with Right format for setting Psuedo CSS factor with SVG URL

I’m making an attempt to supply an SVG as content material for a earlier than psuedo factor.

I’ve efficiently added svgs to my menus utilizing this code:

<svg ><use xlink:href="http://localhost:81/pinkequine/wp-content/themes/pinkequine-new/img/symbol-defs.svg#icon-star-full"></use></svg>

The issue is, once I need to put the URL into CSS for a Pseudo factor, (I’ve checked plenty of solutions on right here), its simply not working for me, so I should be doing one thing fallacious, please can anybody assist.

I’ve tried:

1. Including the URL as a background picture

background:url(http://localhost:81/pinkequine/wp-content/themes/pinkequine-new/img/symbol-defs.svg#icon-star-full);

2. Including the SVG as content material base 64

content material: url("information:utility/font-woff;charset=utf-8;base64, PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgo8dGl0bGU+c3Rhci1mdWxsPC90aXRsZT4KPHBhdGggZD0iTTMyIDEyLjQwOGwtMTEuMDU2LTEuNjA3LTQuOTQ0LTEwLjAxOC00Ljk0NCAxMC4wMTgtMTEuMDU2IDEuNjA3IDggNy43OTgtMS44ODkgMTEuMDExIDkuODg5LTUuMTk5IDkuODg5IDUuMTk5LTEuODg5LTExLjAxMSA4LTcuNzk4eiI+PC9wYXRoPgo8L3N2Zz4K");

3. Encloding the SVG into base 64 font

  @font-face {
    font-family:star-full;
    src: url("information:utility/font-woff;charset=utf-8;base64, PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgo8dGl0bGU+c3Rhci1mdWxsPC90aXRsZT4KPHBhdGggZD0iTTMyIDEyLjQwOGwtMTEuMDU2LTEuNjA3LTQuOTQ0LTEwLjAxOC00Ljk0NCAxMC4wMTgtMTEuMDU2IDEuNjA3IDggNy43OTgtMS44ODkgMTEuMDExIDkuODg5LTUuMTk5IDkuODg5IDUuMTk5LTEuODg5LTExLjAxMSA4LTcuNzk4eiI+PC9wYXRoPgo8L3N2Zz4K");
    font-weight: 400;
    font-style: regular;
  }
  
  p.stars a::earlier than {
    show: block;
    place: absolute;
    high: 0;
    left: 0;
    width: 1em;
    top: 1em;
    line-height: 1;
    content material:' ';
    font-family:star-full;
    font-size:1rem;
    
    text-indent: 0;
}

<p class="stars">   Star    Rankings             <span>                          

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