您可能会认为，这是一个简单的问题，jQuery可以完成其他所有工作。不幸的是，问题归结为一个技术问题：css：after和：before规则不是DOM的一部分，因此无法使用jQuery的DOM方法进行更改。
有有方法来操作使用JavaScript和/或CSS的解决方法，这些要素; 您使用哪一个取决于您的确切要求。
我将从广泛认为的“最佳”方法开始：
1）添加/删除预定的课程
在这种方法中，你已经在用不同的你的CSS创建一个类:after或:before样式。稍后将这个“新”类放在样式表中，以确保它覆盖：
p:before {
content: "foo";
}
p.special:before {
content: "bar";
}
然后，您可以使用jQuery（或普通JavaScript）轻松添加或删除此类：
$('p').on('click', function() {
$(this).toggleClass('special');
});
$('p').on('click', function() {
$(this).toggleClass('special');
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
p.special:before {
content: "bar";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- 优点：易于使用jQuery实现；快速一次更改多种样式；强制分离关注点（将CSS和JS与HTML隔离）
- 缺点： CSS必须是预先编写的，因此
:before或:after不是完全动态的内容
2）将新样式直接添加到文档的样式表中
可以使用JavaScript将样式直接添加到文档样式表中，包括:after和:before样式。jQuery没有提供便捷的快捷方式，但是幸运的是JS并没有那么复杂：
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
.addRule()并且相关.insertRule()方法在今天得到了很好的支持。
作为一种变体，您还可以使用jQuery向文档中添加一个全新的样式表，但是所需的代码并不能使代码更干净：
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');
p:before {
content: "foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
如果我们要讨论的是“操纵”值，而不仅仅是添加值，那么我们还可以:after:before使用其他方法来读取现有值或样式：
var str = window.getComputedStyle(document.querySelector('p'), ':before')
.getPropertyValue('content');
var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);
document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');
p:before {
content:"foo";
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>
使用jQuery时，我们可以替换document.querySelector('p')为$('p')[0]，以缩短代码长度。
- 优点：可以将任何字符串动态插入样式中
- 缺点：原始样式没有改变，只是被覆盖；重复使用会导致DOM任意增大
3）更改其他DOM属性
您还可以在CSS中使用attr()它来读取特定的DOM属性。（如果浏览器支持:before，它支持attr()为好。）通过这种结合content:在一些精心准备的CSS，我们可以改变的内容（而不是其他属性，像保证金或颜色）:before和:after动态：
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
JS：
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
$('p').on('click', function () {
$(this).attr('data-before','bar');
});
p:before {
content: attr(data-before);
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
如果无法提前准备CSS，可以将其与第二种技术结合使用：
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');
$('p').on('click', function () {
$(this).attr('data-before', str);
});
var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');
$('p').on('click', function() {
$(this).attr('data-before', str);
});
p:before {
content: "foo";
color: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
- 优点：不会创建无尽的额外样式
- 缺点：
attr在CSS中只能应用于内容字符串，而不能应用于URL或RGB颜色