大家应该知道js是不能直接控制伪元素的，所以总结了俩方法。下面是未改变前的代码和实现效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.box:before{
content: '阿花';color: red;font-size: 24px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1.通过attr()改变伪元素的值
伪元素通过attr()来获取标签自定义属性的值。这个方法的缺点就是只能改变伪元素的值，而不能改变伪元素的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<style>
.box{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.box:before{
content: attr(dataBefore);color: red;font-size: 24px;
}
</style>
</head>
<body>
<div class="box" dataBefore="阿花"></div>
<script>
var box=document.querySelector('.box');
box.setAttribute('dataBefore','谢谢你');//第二个值为‘’就是伪元素隐藏效果
</script>
</body>
</html>
2.覆盖原有样式
这个方法能更改伪元素的值和样式，缺点就是会造成部分css多余代码，设置content:’ ’ 就可以实现伪元素隐藏效果，当然你也可以设置opacity=0或者display=none都行，看需求
（1）css优先级覆盖
为父元素添加一个新的class类名。后面类名的优先级会高于前面的，将前面的样式覆盖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.box:before{
content: '阿花';color: red;font-size: 24px;
}
.skate:before{
/*提前写在css样式表里，js添加完skate类名后便会覆盖前面box的样式*/
content: '谢谢你';color: blue;font-size: 24px;}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.classList.add('skate');//添加classname skate
</script>
</body>
</html>
（2）更改class类名覆盖
在css中写好新类名的样式，通过js修改类名，之前的样式就会失效（可以看一下和上一个方法其实没什么太大区别）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.box:before{
content: '阿花';color: red;font-size: 24px;
}
.skate{
width: 300px;height: 200px;border: 5px solid black;margin: 100px auto;
}
.skate:before{
content: '谢谢你';color: blue;font-size: 24px;}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.className='skate';//更改classname为skate
</script>
</body>
</html>
（3）内联样式表覆盖
这个适用的前提是你的css写在了外部样式表中，用js动态添加一个内联样式，内联样式优先级大于外部样式，外部样式就会失效；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box"></div>
<script>
var style=document.createElement('style');//创建一个<style>标签
var change=document.createTextNode('.box:before{content:"谢谢你";color:blue;}')//更改后伪元素的样式
style.appendChild(change);//把样式添加到style标签里
document.body.appendChild(style);//把内联样式表添加到html中
</script>
</body>
</html>
js执行的结果就相当于在head头部前面添加了一个style的内联样式表
