Utilizing variables in CSS to create dynamic styling

I’ve a dynamic itemizing that I’m attempting to type based mostly on the the url (it’s the solely approach to goal it). I’ve about 80 listings with distinctive urls I’m attempting to set as variables to use the identical type to. I get errors each with setting the variable and with the type calling the variable. I need assistance! Right here is the code I’ve (with solely two urls set for the variable for now).

:root {
     --url_fb: "https://www.fb.com/belleville.mx/","https://www.fb.com/jurasity-tx.mx/";
}
 .directorist-listing-card-url>a[href=var(--url_fb)]:earlier than {
     content material: url("https://experiencepuertomorelos.com/wp-content/uploads/2022/08/icon-facebook.svg");
     background-color: #3b5998;
}

Thanks for any help.