用js实现before和after伪类的样式修改的示例代码

要用js实现before和after伪类的样式修改，需要先获取到对应的元素，然后通过添加类名或直接修改元素的style属性来实现样式的修改。

下面是一个实现before伪类修改文本内容的例子：

首先，在CSS中定义一个:before伪元素，并赋予它一个content属性和一些样式：

div:before {
  content: "注意：";
  color: red;
  font-weight: bold;
}

然后，在JavaScript中获取到对应的div元素，通过修改其样式来实现before伪类的样式修改：

var divElem = document.querySelector('div');
divElem.style.position = 'relative';
divElem.style.paddingLeft = '80px';

通过将div元素的position设置为relative，然后将paddingLeft设置为80px，就可以将:before伪元素向右移动80px，并将其文本内容添加到div元素的前面。

下面是另一个实现after伪类修改文本内容的例子：

首先，在CSS中定义一个:after伪元素，并赋予它一个content属性和一些样式：

div:after {
  content: "（请注意此处）";
  color: blue;
  font-style: italic;
}

然后，在JavaScript中获取到对应的div元素，通过修改其innerHTML属性来实现after伪类的样式修改：

var divElem = document.querySelector('div');
divElem.innerHTML += '<span style="color: orange;">！</span>';

通过将div元素的innerHTML属性后面追加一个带有color属性的span标签，就可以在div元素后面添加一个文本内容，同时可以设置此文本的颜色。

通过以上两个例子，我们可以看出，使用JavaScript修改before和after伪类的样式既可以通过修改元素的样式属性来实现，也可以通过动态改变元素的内容来实现。