Using variables in CSS to create dynamic styling

I have a dynamic listing that I am trying to style based on the the url (it is the only way to target it). I have about 80 listings with unique urls I am trying to set as variables to apply the same style to. I am getting errors both with setting the variable and with the style calling the variable. I need help! Here is the code I have (with only two urls set for the variable for now).

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

Thanks for any assistance.