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

Question

我正在尝试使用translate3d移动 speudo ::after元素

如果我对此进行硬编码，则可以轻松完成如下操作：

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>

演示

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

Answer 1

任何浏览器都不支持除 'content' 属性以外的任何其他内容的 attr() CSS 值。 因此它不能工作。

请参阅MDN 。