您可能认为这是一个很简单的问题，使用jQuery可以做的所有其他事情。不幸的是，这个问题归结为一个技术问题:css:after和:before规则不是DOM的一部分，因此不能使用jQuery的DOM方法进行修改。

有一些方法可以使用JavaScript和/或CSS工作区来操作这些元素;您使用哪一种取决于您的确切需求。

---

我将从被广泛认为是“最佳”的方法开始:

1)添加/删除一个预定的类

在这种方法中，您已经在CSS中创建了一个具有不同的:after或:before样式的类。将这个“new”类放在样式表的后面，以确保它被覆盖:

p:before {
    content: "foo";
}
p.special:before {
    content: "bar";
}

然后你可以很容易地添加或删除这个类使用jQuery(或香草JavaScript):

$('p').on('click', function() {
    $(this).toggleClass('special');
});

美元(“p”)。On('点击'，函数(){ (美元).toggleClass(特殊的); })； p:{之前 内容:“foo”; 颜色:红色; 光标:指针; ｝ p.special:{之前 内容:“酒吧”; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p>这是一个段落 <p>这是另一段

优点:易于实现与jQuery;快速改变多个风格在一次;强制分离关注点(从HTML中隔离CSS和JS) 缺点: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。特殊:在` `之前，` `内容:` ` + STR + ` ` ` ` ` `); p:{之前 内容:“foo”; 颜色:红色; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p class="special">这是一个段落</p> 这是另一段</p>

. addrule()和相关的. insertrule()方法目前得到了很好的支持。

作为一种变体，你也可以使用jQuery来添加一个全新的样式表到文档中，但必要的代码并不干净:

var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');

Var STR = "bar"; $(' <时尚> p。特殊:{之前内容:“+ str +”}> < /风格”).appendTo(头); p:{之前 内容:“foo”; 颜色:红色; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p class="special">这是一个段落</p> 这是另一段</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。特殊:before'， 'content: "' +str +str + '";'); p:{之前 内容:“foo”; 颜色:红色; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p class="special">这是一个段落</p> 这是另一段</p>

在使用jQuery时，我们可以将document.querySelector('p')替换为$('p')[0]，以获得稍短的代码。

优点:任何字符串都可以动态插入到样式中 缺点:原始样式不会被改变，只是被覆盖;重复使用(ab)可以使DOM变得任意大

---

3)改变一个不同的DOM属性

您还可以在CSS中使用attr()来读取特定的DOM属性。(如果浏览器支持:before，它也支持attr())在一些精心准备的CSS中，通过将此与content:结合起来，我们可以动态地更改:before和:after的内容(但不能更改其他属性，如边距或颜色):

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

JS:

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});

美元(“p”)。On('点击'，函数(){ (美元).attr(“数据”、“酒吧”); })； p:{之前 内容:attr(数据); 颜色:红色; 光标:指针; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p>这是一个段落 <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('点击'，函数(){ (美元)。attr(“数据”,str); })； p:{之前 内容:“foo”; 颜色:红色; 光标:指针; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p>这是一个段落 <p>这是另一段

优点:不会创造出无尽的额外风格 缺点:CSS中的attr只能应用于内容字符串，而不是url或RGB颜色

下面是HTML:

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>

“before”上的计算样式是内容:“VERIFY TO WATCH”;

下面是我的两行jQuery代码，它们使用了添加一个额外的类来特别引用这个元素，然后附加一个样式标签(带一个!important标签)来改变sudo元素内容值的CSS:

$（“span.play：eq（0）”）.addClass（'G'）;

$('体').append(“<时尚>。G:在{重要内容:“NewText”!}> < /风格”);

如果你想完全通过CSS来操作::before或::after sudo元素，你可以用JS来做。见下文;

jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');

注意<style>元素是如何具有一个ID的，如果样式动态变化，可以使用该ID删除它并再次添加到它。

这样，在JS的帮助下，你的元素就可以完全按照你想要的样式通过CSS进行样式化。

下面的解决方案告诉你如何用javascript的attr属性更新伪元素。

在HTML中添加一个属性，你可以用javascript setAttribute操作它。

<div 
 id="inputBoxParent" 
 count="0">
      ...
</div>

用js更新

inputBoxParent.setAttribute('count', value.length)

CSS -在伪元素中添加内容为attr(attributeName)

.input-box-container::after{
  content: attr(count);
}

你完蛋了!!

const inputBoxParent = document.getElementById("inputBoxParent"); const handleOnChange = (value) => { inputBoxParent.setAttribute('count', value.length) } .input-box-container { position: relative; width: 200px; } .input-box-container::after{ position: absolute; bottom: 8px; right: 10px; height: 10px; width: 20px; content: attr(count); } <h4> Type some text inside the box and click outside to see resule i.e. pseudo element content change</h4> <div id="inputBoxParent" class="input-box-container" count="0"> <input type="text" id="inputBox" placeholder="type some thing" onchange="handleOnChange(this.value)" onkeyup="handleOnChange(this.value)" /> </div>

根据克里斯蒂安的建议，你还可以这样做:

$('head').append("<style>.span::after{ content:'bar' }</style>");

有人评论说附加一个完整的样式元素到头部元素，如果你只做一次，这还不错，但如果你需要重置它不止一次，你最终会有大量的样式元素。所以为了防止这种情况，我在头部创建了一个带有id的空白样式元素，并像这样替换它的innerHTML:

<style id="pseudo"></style>

然后JavaScript看起来是这样的:

var pseudo = document.getElementById("pseudo");

function setHeight() {
    let height = document.getElementById("container").clientHeight;
    pseudo.innerHTML = `.class:before { height: ${height}px; }`
}

setHeight()

现在，在我的情况下，我需要这个来根据另一个元素的高度设置一个before元素的高度，它会在调整大小时发生变化，所以使用这个，我可以在每次窗口调整大小时运行setHeight()，它将正确地替换<style>。

希望这能帮助那些被困在做同样事情的人。