Is there a way to use pseudo element :before :after in svg path

Question

I'm trying to add a new element after an svg path, that will have the same shape and path as his parent using :after or :before

I created a g tag wrapping the path i want to target calling it by the class eyes

 <div id="svg-container">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 641.27 1107.33">
  <defs>
   <style>
   .cls-30,.cls-32{stroke:#000;}.cls-30,.cls-32{stroke-miterlimit:10;}.cls-32{stroke-width:2px;}.cls-32{fill:#fff79a;}
   </style>
  </defs>

 <g class="eyes" id="GLOBE_GAUCHE" data-name="GLOBE GAUCHE">
  <path class="cls-32" d="M298.37,210.19a39.52,39.52,0,0,0-18.46,7.23c-13.18,9.52-37,30.1-31.86,51.4,2.06,8.63,4.47,28,28.41,36.54a56.76,56.76,0,0,0,52.73-8.23,58.12,58.12,0,0,0,23.45-38.34,39.45,39.45,0,0,0-.5-15.94C348.79,229.24,337.62,205.53,298.37,210.19Z" transform="translate(-63.9 148.72)"> 
  </path>
 </g>

 <g class="pupilles" id="PUPILLE_GAUCHE" data-name="PUPILLE GAUCHE">
  <path class="cls-30" d="M281.69,266.67s-1.81-13.91,3.65-2.52c3.85-1.57,13.76-7.9,7.61.2,1.37,1.6,8.89,2.93-.84,4.93.48,2.24,6,10-3.41,4.87-1.9-.39-4,9.57-5.66-.92C282.63,271.22,272.29,270.37,281.69,266.67Z" transform="translate(-63.9 148.72)"> 
  </path>
 </g>

 <g class="eyes" id="GLOBE_DROIT" data-name="GLOBE DROIT">
  <path class="cls-32" d="M434.11,207.73A39.52,39.52,0,0,0,415.65,215c-13.18,9.52-37,30.1-31.86,51.4,2.06,8.63,4.47,28,28.41,36.54a56.76,56.76,0,0,0,52.73-8.23,58.12,58.12,0,0,0,23.45-38.34,39.63,39.63,0,0,0-.5-15.94C484.53,226.78,473.35,203.07,434.11,207.73Z" transform="translate(-63.9 148.72)"> 
  </path>
 </g>

 <g class="pupilles" id="PUPILLE_DROIT" data-name="PUPILLE DROIT">
  <path class="cls-30" d="M450.29,260.72s8.59-12.71-4.63-4.78c-1.06-1.35-5-7.78-5.28-.32-1,2.91-15.65,1.23-1.35,7.42.61,1.7-5.82,5.89,2.28,4.74.91,1.9,2.19,6.85,5.92.87C450.32,265.93,457.76,268.9,450.29,260.72Z" transform="translate(-63.9 148.72)"> 
  </path>
 </g>
</svg>
</div>

Then in the css i'm tryin to insert a new element :after the path of the eyes class

html, body {
   height: 100%;
   margin: 0;
}

#svg-container {
  background-color: #f1f1f1;
  height: 100%;
}

svg {
  display: block;
  margin: auto;
  height: 100%;
}
.eyes path::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #d9a12a;
}

I can see in the console that it create the :after element at the right position, however it doesn't seem to show and the number of pixels are not showing (not even 0)

Is there a way to implement this ?