Javascript 如何在商业页面的产品卡上显示多个目录图标

我需要在woocommerce的产品归档页面上显示每个类别的自定义图标。如果产品属于“适用于猫”类别，则在产品卡上显示猫图标。如果它也放在“狗”类别中-在猫图标之前显示狗图标。若产品被列入“为马”类别，也要显示马的图标。 以下是它必须做到的：

我用伪元素求解它：before

.archive .product_cat-for-cat:before {
        content: url('/cat_icon.svg');
        position: relative;
        display: block;
        float: right;
        top: 10px;
        margin-right: 10px;
        z-index: 11;
}
 .archive .product_cat-for-dog:before {
        content: url('/dog_icon.svg');
        position: relative;
        display: block;
        float: right;
        top: 10px;
        margin-right: 10px;
        z-index: 11;
}
 .archive .product_cat-for-horse:before {
        content: url('/horse_icon.svg');
        position: relative;
        display: block;
        float: right;
        top: 10px;
        margin-right: 10px;
        z-index: 11;}

---

但是在css:before中，只显示一个具有高优先级的元素。我如何解决这个问题？

你能给我们看看html吗？是woocommerce吗？@Max是的，woocommerceU可以使用徽章。我不知道怎么做，只有css。