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

Question

使用jQuery选择和操作CSS伪元素，例如:: before和:: after有没有办法使用jQuery 选择/操作CSS伪元素，如::before和::after（以及带有一个分号的旧版本）？例如，我的样式表具有以下规则：.span::after{ content:'foo' }如何使用jQuery将'foo'更改为'bar'？

Answer 1

您还可以使用data属性将内容传递给伪元素，然后使用jQuery来操作：

在HTML中：

<span>foo</span>

在jQuery中：

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

在CSS中：

span:after {
    content: attr(data-content) ' any other text you may want';}

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

在HTML中：

<span>foo</span>

在jQuery中：

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

在CSS中：

span.change:after {
    content: attr(data-content) ' any other text you may want';}

Answer 2

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

您只能在运行时通过CSSOM（思考window.getComputedStyle()）直接访问伪元素样式，这不是jQuery之外的公开，.css()也不支持伪元素的方法。

但是，您总能找到其他方法，例如：

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

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

Answer 3

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

例

在jQuery中：

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

在CSS中：

span.change:after { content: 'bar' }