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

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

这是不实际的，因为我没有为现实世界的使用写这篇文章，只是给你一个可以实现的例子。

css = {
before: function(elem,attr){ 

if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
} else {
 $("#cust_style").remove();
$("body").append("<style> " + elem + ":before {"  + attr +  "} </style>"); 
}

}, after: function(elem,attr){
if($("#cust_style") !== undefined){ 
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 

} else { $("#cust_style").remove();
$("body").append("<style> " + elem + ":after {"  + attr +  "} </style>"); 
}
}
}

这个当前add's a /或追加一个Style元素，其中包含你的必要属性，这将影响目标元素的伪元素之后。

这可以用作

css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after

and

css.before( ... ); // to affect the before pseudo element.

伪元素不能直接通过DOM访问，目前不可能自由编辑css的具体值。

我的方法只是一个例子，它不适合练习，你可以修改它，尝试一些你自己的技巧，使它适合真实世界的使用。

所以用这个和其他东西做你自己的实验吧!

阿达什·赫格德。

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

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

我总是添加我自己的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!');

一种有效但不太有效的方法是在文档中添加带有新内容的规则，并用类引用它。根据需要，类可能需要为内容中的每个值提供唯一的id。

$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');

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

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

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

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