CSS: Using data attribute as content URL

Question

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;
}

Note that the height and width properties here don't actually resize the inserted image. See http://stackoverflow.com/questions/14978807/can-you-apply-a-width-to-a-before-after-pseudo-element-contenturlimage — BoltClock, May 21 '16 at 13:45

score 3 · Accepted Answer · edited May 23 '17 at 10:28

3

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.

edited May 23 '17 at 10:28

Community

1
1

answered May 21 '16 at 13:36

BoltClock

700,868
160
1,392
1,356

radrex · Answer 2 · 2021-02-03T20:58:36.523

I just stumbled upon the same problem, but found a solution using custom properties. So we can pass any type that is allowed as a custom property value to it. Then you can absolute position it if that is what you look for.

You can use it like this:

HTML

<div style="--img-url: url('${imgUrl}')"></div>

CSS

div {
  position: relative;
}

div::before {
  position: absolute;
  top:0;
  left:0;
  width:100px;
  height:100px; 
  content: var(--img-url); 
}

See this post for further info

CSS: Using data attribute as content URL

2 Answers2