css3：尝试动态地将translate3d应用于:: after

Question

我正在尝试使用::after

移动一个speudo translate3d元素

如果我对此进行硬编码，可以按照以下方式轻松完成：

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

但现在我想使用javascript为X方向应用任何值。所以我尝试了以下内容：

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

并在HTML中

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

DEMO

但这不起作用。我认为我做错了什么（希望如此），有什么建议吗？

Answer 1

attr（）CSS值除了＆＃39;内容＆＃39;之外的任何其他内容。任何浏览器都不支持该属性。因此它无法工作。

请参阅MDN。