使用javascript（或jQuery）选择和操作CSS伪元素，如：：before和：：after

是否有任何方法可以使用jQuery选择/操作CSS伪元素，例如

：：before

和

：：after

（以及带有一个分号的旧版本）

例如，我的样式表有以下规则：

.span:：在{content:'foo'}之后

---

如何使用vanilla JS或jQuery将“foo”更改为“bar”？

虽然浏览器通过CSS呈现这些元素，就好像它们是其他真实的DOM元素一样，但伪元素本身并不是DOM的一部分，因为顾名思义，伪元素不是真实的元素，因此，您不能直接使用jQuery（或者任何JavaScript API，甚至是Java）来选择和操作它们。这适用于您试图用脚本修改其样式的任何伪元素，而不仅仅是

：：before

和

：：after

您只能在运行时通过CSSOM（想想

窗口.getComputedStyle（）

）直接访问伪元素样式，jQuery beyond

.css（）

，也不支持伪元素的方法不会公开该样式

但是，您始终可以找到其他解决方法，例如：

• 将样式应用于一个或多个任意类的伪元素，然后在类之间切换（请参见快速示例）-这是惯用的方法，因为它使用简单的选择器（伪元素不是）来区分元素和元素状态，这是它们打算使用的方式

• 通过修改文档样式表来操纵应用于所述伪元素的样式，这更像是一种黑客行为

---

不能在jQuery中选择伪元素，因为它们不是DOM的一部分。 但是您可以向父元素添加特定的类，并在CSS中控制其伪元素

在jQuery中：

<script type="text/javascript">
    $('span').addClass('change');
</script>

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

---

您还可以将内容传递给带有数据属性的伪元素，然后使用jQuery来处理：

在HTML中：

<span>foo</span>

<span>foo</span>

在CSS中：

span:after{
内容：attr（数据内容）‘您可能需要的任何其他文本’；
}

如果您想阻止“其他文本”出现，可以将其与seucolega的解决方案结合起来，如下所示：

<div id="something">Test</div>

<style id="pseudo"></style>

在HTML中：

<span>foo</span>

<span>foo</span>

在CSS中：

span.更改：之后{
内容：attr（数据内容）‘您可能需要的任何其他文本’；
}

一种有效但效率不高的方法是向文档中添加一个包含新内容的规则，并使用类引用它。根据需要，该类可能需要内容中每个值的唯一id

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

$（{content:bar；}之后的span.id”）.appendTo（$（“head”）；
$（'span'）.addClass（'id-after'）；

按照Christian的建议，您还可以：

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

$（'head'）.append（“.span:：after{content:'bar}”）；

您可能认为这是一个简单的问题，jQuery还可以做其他任何事情。不幸的是，问题归结为一个技术问题：css:after和：before规则不是DOM的一部分，，因此不能使用jQuery的DOM方法进行更改

有一些方法可以使用JavaScript和/或CSS变通方法来操作这些元素；您使用哪一种取决于您的具体要求

---

我将从被广泛认为是“最佳”的方法开始：

1） 添加/删除预定类 在这种方法中，您已经使用不同的

：after

或

：before

样式在CSS中创建了一个类。稍后在样式表中放置此“新”类，以确保其覆盖：

p:before {
    content: "foo";
}
p.special:before {
    content: "bar";
}

然后，您可以使用jQuery（或vanilla JavaScript）轻松添加或删除此类：

$（'p'）。在（'click'，function（）上{
$（this.toggleClass（'special'）；
});
p:before{
内容：“富”；
颜色：红色；
光标：指针；
}
p、 特别：以前{
内容：“酒吧”；
}

这是一段

这是另一段。
以下是HTML：

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>


：：之前

“之前”的计算样式为
内容：“验证以观看”

下面是我的两行jQuery，它使用了添加一个额外的类来专门引用这个元素，然后添加一个样式标记（带有一个！重要标记）来更改sudo元素内容值的CSS的想法：

$（“span.play:eq（0）”）.addClass（'G'）

$（'body'）.append（.G:before{content:'NewText'！important}”）
如果您想完全通过CSS操作：：before或：：after sudo元素，可以在JS中进行操作。见下文

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

jQuery（'head'）。追加（'/*您的样式在这里*/'）；

请注意
元素如何具有ID，如果您的样式发生动态更改，您可以使用该ID删除它并再次附加到它

通过这种方式，在JS的帮助下，您的元素通过CSS完全符合您的风格。
谢谢大家！
我设法做到了我想要的：D
来看看

我想让外部div的不透明度不同于内部div的不透明度，只需单击somwewhere；）
谢谢

$（'ena'）。在（'click'，函数（）{
$（'head'）.append（'ena:before{opacity:0.3；}”）；
});
$（'duop'）。关于（'click'，函数（e）{
$（'head'）.append（'ena:before{opacity:0.8；}”）；
e、 停止传播（）；
});
#埃纳{
宽度：300px；
高度：300px；
边框：1px黑色实心；
位置：相对位置；
}
#二重唱{
不透明度：1；
位置：绝对位置；
顶部：50px；
宽度：300px；
高度：100px；
背景色：白色；
}
#埃娜：以前{
内容：attr（以前的数据）；
颜色：白色；
光标：指针；
位置：绝对位置；
背景色：红色；
不透明度：0.9；
宽度：100%；
身高：100%；
}
埃纳p

duoyyyyyyyyyyyyyyyyyyyyyy p
这是进入的方式：船尾
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>"); 
}
}
}

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

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

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

<div id="something">Test</div>

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

<button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

<button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

<style id="pseudo"></style>

var pseudo = document.getElementById("pseudo");

function setHeight() {
    let height = document.getElementById("container").clientHeight;
    pseudo.innerHTML = `.class:before { height: ${height}px; }`
}

setHeight()

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

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

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

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

<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>

: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);
}

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("");
 }
);

    <style> 
    .case-after:after { // set your properties here like eg: 
        color:#3fd309 !important; 
     } 
     .case-before:before { // set your properties here like eg: 
        color:#151715 !important; 
     }
 </style>
  // case for after
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-after');
    });

     // case for before
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-before');
    });

<div 
 id="inputBoxParent" 
 count="0">
      ...
</div>

inputBoxParent.setAttribute('count', value.length)

.input-box-container::after{
  content: attr(count);
}