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

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

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

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

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

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

下面是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: 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的具体值。

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

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

阿达什·赫格德。

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

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