Display product metafields as a pseudo element on collection cards

[KScheidel]

Hi Everyone, I am trying to get a product metafield to display as a pseudo element on my collection card information ".collection .card__information:before." So, Ideally the site would be able to know if a product metafield was added to a specific product and if so, it would display it like so: 

I was able to get the pseudo element to display the collection title via this code:

<script>

document.addEventListener("DOMContentLoaded", function() {

    var cardInformation = document.querySelector('.collection .card__information');

    var title = document.title.replace(/roro revival/i, '').replace(/page \d+/i, '').trim();

    var cleanTitle = title.replace(/-/g, ''); // Replacing hyphens with spaces

    // Remove all non-alphabetical characters from cleanTitle

    var alphabeticTitle = cleanTitle.replace(/[^a-zA-Z\s]/g, '');

    // Debugging

    console.log("Original Title:", title);

    console.log("Clean Title:", cleanTitle);

    console.log("Alphabetic Title:", alphabeticTitle);

    if (cardInformation) {

        var newStyle = document.createElement('style');

        newStyle.innerHTML = `

            .collection .card__information::before {

                content: "${alphabeticTitle}";

                display: block; /* Ensure content is displayed */

            }

        `;

        document.head.appendChild(newStyle);

    }

});

</script>

but, no luck in adjusting this code to populate the specific metafields vs the collection title.

[Arif_Shopidevs]

Hello, Will you please tell me what you like to achieve? Are you able to print your meta-filed value in the markup? Why the meta filed value need to set in sudo code. 
Wating for your response to help you to solve this issues.

Thank you