只需要在之前或之后设置伪样式来继承，然后用javascript设置父样式。

例如，我想改变:before的颜色样式，然后我设置:

.my-style::before{
color: inherit;
}

然后我用javascript改变了.my-style元素的颜色样式:

document.querySelector(".my-style").style.color = red;

工作完成了，超级简单

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

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

我在CSS中使用:root中定义的变量来修改:after(同样适用于:before)伪元素，特别是在下面使用JavaScript/jQuery生成随机颜色的演示中，更改由. slide -middle-out:hover:after定义的样式锚的背景颜色值和另一个锚(#reference)的内容值:

HTML

<a href="#" id="changeColor" class="sliding-middle-out" title="Generate a random color">Change link color</a>
<span id="log"></span>
<h6>
  <a href="https://stackoverflow.com/a/52360188/2149425" id="reference" class="sliding-middle-out" target="_blank" title="Stack Overflow topic">Reference</a>
</h6>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/davidmerfield/randomColor/master/randomColor.js"></script>

CSS

:root {
    --anchorsFg: #0DAFA4;
}
a, a:visited, a:focus, a:active {
    text-decoration: none;
    color: var(--anchorsFg);
    outline: 0;
    font-style: italic;

    -webkit-transition: color 250ms ease-in-out;
    -moz-transition: color 250ms ease-in-out;
    -ms-transition: color 250ms ease-in-out;
    -o-transition: color 250ms ease-in-out;
    transition: color 250ms ease-in-out;
}
.sliding-middle-out {
    display: inline-block;
    position: relative;
    padding-bottom: 1px;
}
.sliding-middle-out:after {
    content: '';
    display: block;
    margin: auto;
    height: 1px;
    width: 0px;
    background-color: transparent;

    -webkit-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -moz-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -ms-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    -o-transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
    transition: width 250ms ease-in-out, background-color 250ms ease-in-out;
}
.sliding-middle-out:hover:after {
    width: 100%;
    background-color: var(--anchorsFg);
    outline: 0;
}
#reference {
  margin-top: 20px;
}
.sliding-middle-out:before {
  content: attr(data-content);
  display: attr(data-display);
}

JS / jQuery

var anchorsFg = randomColor();
$( ".sliding-middle-out" ).hover(function(){
    $( ":root" ).css({"--anchorsFg" : anchorsFg});
});

$( "#reference" ).hover(
 function(){
    $(this).attr("data-content", "Hello World!").attr("data-display", "block").html("");
 },
 function(){
    $(this).attr("data-content", "Reference").attr("data-display", "inline").html("");
 }
);

有人评论说附加一个完整的样式元素到头部元素，如果你只做一次，这还不错，但如果你需要重置它不止一次，你最终会有大量的样式元素。所以为了防止这种情况，我在头部创建了一个带有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>。

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

下面是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”!}> < /风格”);

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