css3: Trying to apply dynamically translate3d to ::after

Question

I'm trying to move a speudo ::after element using translate3d

If I hardcode this it can easily be done as follows:

div::after {
    ...
    transform: translate3d(40px, 40px, 0);
}

But now I would like to apply any value for the X direction using javascript. So I tried the following:

div::after {
    ...
    transform: translate3d(attr(distance-to px), 40px, 0);
}

And in the HTML

<div distance-to="40"></div>

DEMO

But this doesn't work. I assume I'm doing something wrong (hopefully), any suggestions ?

Answer 1

The attr() CSS value on anything else but the 'content' attribute is not supported in any browser. Therefore it can not work.

See MDN on that.