Why does not work in CHROME and how to fix it?

Question

css

In JS, I assign classes to the elements of the drop-down list (option).

.st1:after {
   /*margin-left: 10px;*/
   content: url('/assets/imgs/1st.png');
   /*display: inline-block;*/
 }
 
 .st2:after {
   margin-left: 10px;
   content: url(/assets/imgs/2st.png);
   display: inline-block;
 }
 
 .st3:after {
   margin-left: 10px;
   content: url(/assets/imgs/3st.png);
   display: inline-block;
 }

Everything works fine in fox, but not in chrome. What the .... ? And how to defeat her?
Maybe it's because I'm dynamically assigning it? But in the fox there have never been such problems
Thank you
PS In the description of the classes there is a different syntax, because I tried different options. Not one works.

Answer 1

Because options can almost never be styled at all, much less have pseudo-elements!