How do I pass the dynamic output of a php variable or php function to a CSS variable?

Here is a working solution:

Put the php code that produces the html string into a php file of the page that is always loaded (e. g. the header.php). Assign an ID.

<div id="myid"><?php produces-a-string() ?></div>

Make the html string invisible to the ordinary user with CSS:

 #myid {
display: none;
}

Grab the loaded html string with JavaScript to create a CSS variable:

document.onload = function() {
var grab = document.getElementById("myid");
var strText = grab.innerText;
grab.setProperty("--grabbed", strText);
}

The html must be loaded before JavaScript, else the corresponding JavaScript variable will be null. Hence put the JavaScript in an event listener "load".

This adds to the CSS code:

#myid {
  display: none;
  --grabbed: string-produced;
}

The string can then be used by other CSS attributes:

main {
attribute: var(--grabbed);
}

which acts like:

main {
attribute: string-produced;
}

If you want to use the produced string with CSS attribute "content", creating a CSS variable does not work, as content does not accept var() as value.

But content accepts attr() as value. This accesses the HTML global attributes (allowed for any HTML element). I chose the attribute "title".

In JavaScript, you have to assign the global attribute to the element with the class or id to which you want to add a "content" attribute.

document.onload = function() {
var grab = document.getElementById("myid");
var strText = grab.innerText; 
document.getElementBy[id-where-content-is-added].setAttribute("title", strText);
}

This makes the following possible:

#id-where-content-is-added {
content: attr(title);
}

which acts like:

#id-where-content-is-added {
content: string-produced;
}