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

css3: Trying to apply dynamically translate3d to ::after

本文关键字：动态 应用于 after translate3d css3      更新时间：2023-09-26

我正试图使用translate3d 移动一个特殊的::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>

演示

但这行不通。我想我做错了什么（希望如此），有什么建议吗？

任何浏览器都不支持除"content"属性之外的任何其他属性的attr（）CSS值。因此它不能工作。

请参阅MDN。

相关文章：