[SOLVED] CSS: Using data attribute as content URL

CSS: Using data attribute as content URL

So I have a div that allows me to display a QR code of the current page URL:

.page-qr:before {
  content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8);
  height: 100px;
  width: 100px;
}

And used like:

<div class="page-qr"> </div>

Obviously, to get the current URL on-the-fly, I have to put this CSS styling in the <head> of my page. I am trying to move it to the stylesheet.

I had the idea to use a data attribute to specify the URL:

<div class="page-qr" data-url="https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8"> </div>

So, my question is, is it possible to double up the usage of content:url() and attr(data-url) in the stylesheet?

.page-qr:before {
  content: url(attr(data-url)); /* Doesn't work, but you get the idea */
  height: 100px;
  width: 100px;
}

Solution

This is a proposed feature for attr() in css-values-3. The CSS would look like this:

.page-qr:before {
  content: attr(data-url url);
  height: 100px;
  width: 100px;
}

Unfortunately there are no known implementations, so this still isn't possible.