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

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”属性不起作用:(

尽管它们是由浏览器通过CSS呈现的，就像它们像其他真正的DOM元素一样，但伪元素本身不是DOM的一部分，因为伪元素，顾名思义，不是真正的元素，因此您不能直接使用jQuery(或任何JavaScript API，甚至是Selectors API)选择和操作它们。这适用于您试图用脚本修改其样式的任何伪元素，而不仅仅是::before和::after。

你只能在运行时通过CSSOM(想想window.getComputedStyle())直接访问伪元素样式，jQuery除了.css()之外不会公开它，这个方法也不支持伪元素。

不过，你总能找到其他方法，比如:

将样式应用到一个或多个任意类的伪元素上，然后在类之间切换(参看seucolega的回答以获得一个快速示例)——这是一种惯用的方法，因为它使用简单的选择器(伪元素没有)来区分元素和元素状态，这是它们打算使用的方式 通过修改文档样式表来操纵应用于上述伪元素的样式，这更像是一种hack

我已经创建了一个jQuery插件来添加css伪规则，如使用.css()为特定的元素。

插件代码和测试用例在这里(更新的Fiddle) 用例作为简单的CSS图像弹出这里

用法:

$('body')
  .css({
    backgroundColor: 'white'
  })
  .cssPseudo('after', {
    content: 'attr(title) ", you should try to hover the picture, then click it."',
    position: 'absolute',
    top: 20, left: 20  
  })
  .cssPseudo('hover:after', {
    content: '"Now hover the picture, then click it!"'
  });

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

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

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

$('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!');