CSS content: attr() does not display the cotent

These are my code in HTML:

<th class="woocommerce-table__product-name product-name" data-label="<?php echo esc_html( 'Product', 'woocommerce' ); ?>"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
<th class="woocommerce-table__product-shop product-shop" data-label="<?php echo esc_html( 'Shop', 'woocommerce' ); ?>"><?php esc_html_e( 'Shop', 'woocommerce' ); ?></th>
<th class="product-quantity" data-label="<?php echo esc_html( 'Quantity', 'woocommerce' ); ?>" ><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></th>
<th class="woocommerce-table__product-table product-total" data-label="<?php echo esc_html( 'Total', 'woocommerce' ); ?>"><?php esc_html_e( 'Total', 'woocommerce' ); ?></th>

I am trying to display the content of in front of each my , so I did this in my style.css:

    .woocommerce-order .avada-order-details table.shop_table td::before {
        content: attr(data-label);
        float: left;
    }

However, it shows nothing. If I change content to some string, such as content: "Product", it works. And I am sure the data-label attribute is working because I can use the attribute selector in my CSS. Does anyone have idea why it doesn't work?

Thanks in advance for helping me out :D