translate a content: 'Price'; in a scss file

Question

I have a file called _catalog-extend.scss. When I open this file I see in de the code a hardcoded 'Price'.

  //
//  Price box
//  _____________________________________________
.product-info-main .price-box {
    width: 100%;
    float: left;
    padding-left: 40%;
    min-height: 60px;
    line-height: 60px;
    position: relative;
    justify-content: flex-start;

    // Price label content: 
    &:before {
        content: 'Price';
        position: absolute;
        left: 0;
        min-height: 60px;
        width: 40%;
        line-height: 60px;
        text-transform: uppercase;
        font-weight: bold;
        color: $text__color;
    }

But how can I translate this piece "content: 'Price';" for a multistore?

Answer 1

You cannot translate content in CSS files.

The easiest way around this is to translate the text in the template and use the attr() function to retrieve the translated value:

Add a data attribute:

data-label="<?= $escaper->escapeHtml(__('Price')); ?>"

And access this in your CSS:

content: attr(data-label)