* behind compare price

Online Store and Theme Development
1

Du to the price regulations in Germany I need to explain the base of the shown compare price. For that reason I´d like to get a * behind the compare price if the metafielcd product.metafields.custom.vergleichspreisgrundlage is filled, to have the possibility to explain below.

I´m not getting it working. Actually I tried to change the code like this:

<span class="price {% if settings.show_compare_price == 'after' %} price-reverse{% endif %}">
    <s data-compare-price="{{ compare_price | floor }}">
        {{ compare_price | money_with_currency }}
        {%- if product.metafields.custom.vergleichspreisgrundlage -%}
            <sup>*</sup>
        {%- endif -%}
    </s>
    <span data-price="{{ price | floor }}">{{ price | money_with_currency }}</span>
</span>

The css for it I tried

.price s sup {
    font-size: 0.6em; /* Größe des Sterns anpassen */
    vertical-align: super; /* Hochstellen des Sterns */
    margin-left: 2px; /* Abstand zum Vergleichspreis */
    color: inherit; /* Gleiche Farbe wie der Vergleichspreis */
}

Can anybody please help?