伪元素中的CSS变量（自定义属性）；内容“；财产

示例使用（我想要的）

显示它不工作的测试用例：

document.addEventListener（'mousemove'，（e）=>{
document.documentElement.style.setProperty（'--mouse-x'，e.clientX）
document.documentElement.style.setProperty（'--mouse-y'，e.clientY）
//解释文本的输出
document.querySelector（'.x'）.innerHTML=e.clientX
document.querySelector（'.y'）.innerHTML=e.clientY
})

/*我想要什么*/
div：：之后{
内容：var（--mouse-x，245）“/”var（--mouse-y，327）；
}
/*设置和演示样式*/
div：：之前{
内容：“鼠标位置：”；
}
div{
位置：绝对位置；
排名：0；
左：0；
转换：转换（计算（变量（--mouse-x，245）*1px），计算（变量（--mouse-y，327）*1px））；
宽度：10em；
高度：10公分；
背景：#ff3b80；
颜色：#fff；
显示器：flex；
柔性流动：柱；
对齐项目：居中；
证明内容：中心；
边界半径：100%；
改变：转变；
}
身体{
边缘：2米；
字体系列：无衬线；
}
p{
最大宽度：50%；
最小宽度：25em；
}

如果这有效的话。。。

我们应该看到这样的情况：245/327在div的pseudo:：after元素中使用mousemove坐标进行更新。

在自定义属性的值周围需要引号

<div data-position></div>

---

我不太确定我是否正确理解了你的问题，但我认为这里有一个解决方案

您可以为

元素定义自定义属性

  var position = e.clientX + " " + e.clientY
  document.querySelector("div").setAttribute('data-position', position)

最后，在伪元素的

content

属性中使用

attr（）

CSS函数

瞧

---

代码段：

document.addEventListener（'mousemove'，（e）=>{
document.documentElement.style.setProperty（'--mouse-x'，e.clientX）
document.documentElement.style.setProperty（'--mouse-y'，e.clientY）
变量位置=e.clientX+“/”+e.clientY
document.querySelector（“div”）.setAttribute（'data-position'，position）
//解释文本的输出
document.querySelector（'.x'）.innerHTML=e.clientX
document.querySelector（'.y'）.innerHTML=e.clientY
})

/*我想要什么*/
div：：之后{
内容：attr（数据位置）；
}
/*设置和演示样式*/
div：：之前{
内容：“鼠标位置：”；
}
div{
位置：绝对位置；
排名：0；
左：0；
转换：转换（计算（变量（--mouse-x，245）*1px），计算（变量（--mouse-y，327）*1px））；
宽度：10em；
高度：10公分；
背景：#ff3b80；
颜色：#fff；
显示器：flex；
柔性流动：柱；
对齐项目：居中；
证明内容：中心；
边界半径：100%；
改变：转变；
}
身体{
边缘：2米；
字体系列：无衬线；
}
p{
最大宽度：50%；
最小宽度：25em；
}

/

为清晰起见进行编辑：带有整数值的CSS自定义属性可以通过

div{
--变量：123；
}
跨度：之后{
计数器复位：变量var（--变量）；
内容：计数器（变量）；
}

---

变量是。

内容

属性只允许字符串，并且由于您正在解除与数字的对齐，CSS无法强制转换变量，因此您可以选择创建另一组变量（来自JS），该组变量将用作打印值，类型为

字符串

要将

--mouse-x-text

设置为

String

，仅使用旧的强制转换技巧

2+“”=“2”

，将其强制转换为该类型是不够的，但是

JSON。stringify

是我所知道的唯一一种可以输出“真实”字符串的方法，超出已经存在的字符串值，这意味着字符串中的字符串，因为CSS似乎剥离了第一个字符串层

document.addEventListener（'mousemove'，（{clientX:x，clientY:y}）=>{
const{style}=document.documentElement
style.setProperty（'--mouse-x'，x）
style.setProperty（'--mouse-y'，y）
//印刷用
style.setProperty（'--mouse-x-text'，JSON.stringify（x+“”））
style.setProperty（'--mouse-y-text'，JSON.stringify（y+“”））
})

body:：before{
内容：“X:“变量（--mouse-X-text）”Y:“变量（--mouse-Y-text”）；
}

我建议在问题中直接发布代码，以防将来链接中断。啊，谢谢你的提示。我希望它能嵌入并显示CodePen演示…这是一个复制品，但因为你在这里处理数字，darrylyeo的黑客会做得很好。不过这似乎打破了它用作int的定位，我猜CSS不像JS那样为你做类型转换。这非常接近我想要的。然而，尽管这提供了完全基于CSS变量的伪元素中的值的实时更新，但正如@DBS所指出的，DIV失去了定位功能，这是一个令人沮丧的问题。@Jase显然这并不理想，但您可以只存储相同值的int和string版本（例如，“--mouse-x”表示int，“--mouse-x-s”表示string）并在需要的地方使用相关的数据类型。同意，到目前为止，用一组变量无法做到这一点。谢谢@Ricky_Ruiz。抱歉我的帖子没有说得更清楚。虽然您的解决方案会产生功能性的结果，但我更感兴趣的是使用CSS自定义属性功能，而不是直接对元素（及其属性）进行DOM操作。@Jase我明天早上会再给它一次机会，看看能否提供一个适合您需要的答案。希望这能以你想要的方式解决。会让你不断更新。干杯。@Jase检查DarryLeo的。聪明的解决方案，只需从

计数器重置属性中删除
245
值，它们不是必需的。啊！这很好：）一组变量，没有直接的DOM操作。我喜欢。非常感谢！很高兴接受挑战！打印非整数值的
0
（例如
1.1
）
<div data-position></div>

  var position = e.clientX + " " + e.clientY
  document.querySelector("div").setAttribute('data-position', position)

div::after {
  content: attr(data-position);
}