如何强制转换css变量的类型？

我想用纯css在元素内部的伪元素中显示元素的

z-index

值

为了实现这一点，我决定使用CSS变量。但问题是

z-index

是一个数字，而

content

是一个字符串。我怎样才能确定价值

在下面的示例中：如果

p

使用

z-index:var（--z）

它将显示在红色

div

上，带有

z-index:8

。我希望

p

使用

z-index

，同时在

之后显示
。我怎么做


p{
位置：相对位置；
z指数：var（--z）；
背景：银；
}
p:之后{
内容：var（--z）；
颜色：红色；
}
div{
背景：红色；
z指数：8；
}
/*下面就是一些造型和定位的东西*/
身体{
保证金：0；
}
p{
边缘：1em.5em；
填充：0.5em 0.3.5em；
线高：2米；
}
div{
位置：绝对位置；
顶部：.5em；
左：1米；
身高：6em；
宽度：2米；
}

我有正确的z索引，但没有：after


我没有z-index，但是有：after

发现了一个有趣的黑客：

p:after {
  counter-reset: z var(--z);
  content: counter(z);
}

整个代码：


p{
位置：相对位置；
z指数：var（--z）；
背景：银；
}
p:之后{
内容：var（--z）；
颜色：红色；
}
p、 解决方案：之后{
计数器复位：z var（--z）；
内容：计数器（z）；
颜色：红色；
}
div{
背景：红色；
z指数：8；
}
/*下面就是一些造型和定位的东西*/
身体{
保证金：0；
}
p{
边缘：1em.5em；
填充：0.5em 0.3.5em；
线高：2米；
}
div{
位置：绝对位置；
顶部：.5em；
左：1米；
高度：9公分；
宽度：2米；
}

我有正确的z索引，但没有：after


我没有z-index，但是有：after


我有z-index和：after