本文总结了利用JavaScript或jQuery动态修改CSS伪元素（如:before、:after）样式的四种常用方法。包括通过切换类名、动态插入CSS规则、创建新样式表以及利用HTML5 data属性配合attr()函数。这些方案解决了原生JS无法直接选择伪类的问题，适用于需要动态控制装饰性内容的场景。
动态控制CSS伪元素样式的背景
在Web开发中，经常需要通过JavaScript动态控制CSS伪元素（如:before和:after）的样式。然而，众所周知，JavaScript或jQuery并不直接支持伪类选择器。本文旨在总结几种常见的实现技巧。
HTML结构示例
<p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</p>
CSS基础样式
.red::before {
content: 'red';
color: red;
}
通过切换类名修改样式
方案一
通过JavaScript或jQuery修改<p>元素的类名，从而间接改变伪元素的样式表现。
.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');
动态插入CSS规则
方案二
在页面现有的<style>标签中，动态插入新的CSS规则。
document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);
创建并注入新样式表
方案三
创建一个新的样式表对象，并利用JavaScript或jQuery将其注入到<head>标签中。
// Create a new style tag
var style = document.createElement("style");
// Append the style tag to head
document.head.appendChild(style);
// Grab the stylesheet object
sheet = style.sheet
// Use addRule or insertRule to inject styles
sheet.addRule('.red::before','color: green');
sheet.insertRule('.red::before { color: green }', 0);
jQuery实现
$('<style>.red::before{color:green}</style>').appendTo('head');
利用HTML5 Data属性与jQuery
方案四
利用HTML5的data属性，通过attr()方法动态修改属性值，进而影响伪元素的content或color。
<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
content: attr(data-attr);
color: red;
}
$('.red').attr('data-attr', 'green');
以上介绍了四种实现动态修改伪元素样式的方法。如果您有更优的解决方案，欢迎在评论区留言讨论。