js动态修改after，before的content内容，以及动态修改单个after，before的属性

在JavaScript中，可以使用CSS样式对::before和::after伪元素的content属性进行动态修改。以下是一个简单的例子，演示如何使用JavaScript动态改变这些伪元素的内容和单独属性：

HTML:

<div class="dynamic-element">Hello World</div>

CSS:

.dynamic-element::before {
  content: "Before content";
  color: blue;
}
 
.dynamic-element::after {
  content: "After content";
  color: red;
}

JavaScript:

// 获取元素
var elem = document.querySelector('.dynamic-element');
 
// 动态修改::before的内容
elem.style.setProperty('before', 'content', '"New before content"');
 
// 动态修改::after的内容
elem.style.setProperty('after', 'content', '"New after content"');
 
// 动态修改单独的::before属性
elem.style.setProperty('before', 'color', 'green');

在上面的代码中，我们首先通过document.querySelector选择了一个具有dynamic-element类的元素。然后，我们使用style.setProperty方法来修改伪元素的content和其他属性。注意，由于::before和::after不是真实的DOM元素，因此不能直接修改它们的属性，需要通过CSS样式来间接修改。