使用 jQuery 选择和操作 CSS 伪元素,例如:: before 和:: after

.span::after{ content:'foo' }

答案

<span>foo</span>
$('span').hover(function(){
    $(this).attr('data-content','bar');
});
span:after {
    content: attr(data-content) ' any other text you may want';
}
<span>foo</span>
$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});
span.change:after {
    content: attr(data-content) ' any other text you may want';
}
p:before {
    content: "foo";
}
p.special:before {
    content: "bar";
}
$('p').on('click', function() {
    $(this).toggleClass('special');
});
var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');
var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');
var str = window.getComputedStyle(document.querySelector('p'), ':before') 
           .getPropertyValue('content');
p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}
$('p').on('click', function () {
    $(this).attr('data-before','bar');
});
var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () {
    $(this).attr('data-before', str);
});

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

您只能在运行时通过 CSSOM(think window.getComputedStyle() )直接访问伪元素样式,而 jQuery 除了.css()之外,jQuery 不会公开该伪元素样式,该方法也不支持伪元素。

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

  • 将样式应用于一个或多个任意类的伪元素,然后在类之间进行切换(有关快速示例,请参见seucolega 的答案 )—这是惯用的方式,因为它使用了简单的选择器(伪元素不是)区分元素和元素状态,以及它们的预期使用方式

  • 通过更改文档样式表来操纵应用于所述伪元素的样式,这更像是骇客

<script type="text/javascript">
    $('span').addClass('change');
</script>
span.change:after { content: 'bar' }

我们还可以依靠自定义属性(又称 CSS 变量)来操纵伪元素。我们可以在规范中看到:

自定义属性是普通属性,因此可以在任何元素上声明它们,可以使用常规继承级联 规则进行解析,可以使用 @media 和其他条件规则进行条件设置,可以在HTML 的 style 属性中使用 ,可以读取或设置使用 CSSOM

考虑到这一点,我们的想法是在元素中定义自定义属性,而伪元素将简单地继承它。因此我们可以轻松地对其进行修改。

1)使用内联样式

$('head').append("<style>.span::after{ content:'bar' }</style>");
// Get the color value of .element:before
var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color');

// Get the content value of .element:before
var content = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('content');
jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');
$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head"));
$('span').addClass('id-after');
<div class="icon">
  <span class="play">
    ::before
  </span>
</div>