Injected CSS content appears twice

I inserted custom CSS content and it appears twice on the form.

Here is the picture:

Here is the corresponding CSS snippet:

.form-product-details span:before {
    content : "- item value: ";
    font-weight : 400;
}
 

You can see double entry in the design: https://www.jotform.com//?formID=62785245749167#design

and preview: https://www.jotform.us/form/62785245749167

Can you fix this, please?

Victor

Please, replace the given code with this one: 

.form-product-details {

    content : "- item value: ";

    font-weight : 200;

}

It should show one text only.

The fix you propose does not work - the form does not show any " - item value: " text when the fix is applied.

My original CSS injected snippet was:

.form-product-details span:before {
    content : "- item value: ";
    font-size : 14px;
    font-weight : 400;
}

Feel free to remove it from the form or make changes otherwise, I just need it working - showing correctly. If you have any other idea of how to insert "- item value: " after the product name and before the price, please advise.

Thanks,

-Victor

The CSS codes you added above will add the content to both <span> under .form-product-details that is why you're seeing two "-item value:".

Please use the CSS codes provided by my colleague, Kevin_G, and add ":before" after the class .form-product-details

.form-product-details:before {

    content : "- item value: ";

    font-weight : 200;

}

Excellent, thank you!