为什么要添加类或属性，当你可以添加一个样式头

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

您可以创建一个伪属性，也可以使用一个现有的属性，并在伪元素的样式表中继承它。

var switched = false; // Enable color switching setInterval(function () { var color = switched ? 'red' : 'darkred'; var element = document.getElementById('arrow'); element.style.backgroundColor = color; // Managing pseudo-element's css // using inheritance. element.style.borderLeftColor = color; switched = !switched; }, 1000); .arrow { /* SET FICTIONAL PROPERTY */ border-left-color:red; background-color:red; width:1em; height:1em; display:inline-block; position:relative; } .arrow:after { border-top:1em solid transparent; border-right:1em solid transparent; border-bottom:1em solid transparent; border-left:1em solid transparent; /* INHERIT PROPERTY */ border-left-color:inherit; content:""; width:0; height:0; position:absolute; left:100%; top:-50%; } <span id="arrow" class="arrow"></span>

似乎它对“content”属性不起作用:(

下面的解决方案告诉你如何用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>

您可能认为这是一个很简单的问题，使用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颜色

我总是添加我自己的utils函数，就像这样。

function setPseudoElContent(selector, value) {    
    document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}

setPseudoElContent('.class::after', 'Hello World!');

或使用ES6功能:

const setPseudoElContent = (selector, value) => {    
    document.styleSheets[0].addRule(selector, `content: "${value}";`);
}

setPseudoElContent('.class::after', 'Hello World!');

$ (' .span ')。attr(“data-txt”、“foo”); $ (' .span ')。点击(函数(){ (美元)。Attr ('data-txt'，"任何其他文本"); }) .span { ｝ .span:{后 内容:attr (data-txt); ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> < div class =“跨度”> < / div >