如何在javascript中设置hr:after上的数据内容？

我知道可以在javascript中为元素添加样式。例如

myElement.style.color = "red";

但是说我想做相当于

hr:after {
  content: "myRuntimeValue"
}

---

如何在javascript中实现这一点？

您可以通过元素属性间接实现这一点：

CSS

JS

---

：before

和

：after

不是实际的DOM元素。。。所以，你不能从JS对它们做任何事情

但您可以创建两个具有不同内容和样式的类，并切换该类：

document.getElementById（'demo'）.addEventListener（'click'，function（）{
this.classList.remove（'demo'）；
this.classList.add（'New-demo'）；
});
.demo:after{
内容：“myRuntimeValue”；
颜色：橙色；
}
.新演示：之后{
内容：“一些新的布布！”；
颜色：红色；
}
点击我
 
您不能通过JavaScription设置伪元素的样式，所以这是不可能的？（至少我现在知道谷歌该怎么做了——thx）
p#my-id::after {
    // set content to be the value of an attribute on the element p
    content: attr(data-value);
}

const element = document.getElementById('my-id');
element.setAttribute('data-value', 'myRuntimeValue');