javascript - 使用jQuery选择和操作CSS伪元素，例如:: before和:: after(Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery)

Question

Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery?

(有没有办法使用jQuery选择/处理CSS伪元素，例如::before和::after （以及带有一个分号的旧版本）？)

For example, my stylesheet has the following rule:

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

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

How can I change 'foo' to 'bar' using jQuery?

(如何使用jQuery将'foo'更改为'bar'？)

  ask by JBradwell translate from so

Answer 1

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

(您还可以将内容传递给具有data属性的伪元素，然后使用jQuery进行操作：)

In HTML:

(在HTML中：)

<span>foo</span>

In jQuery:

(在jQuery中：)

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

In CSS:

(在CSS中：)

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

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

(如果要防止显示“其他文本”，可以将其与seucolega的解决方案结合使用，如下所示：)

In HTML:

(在HTML中：)

<span>foo</span>

In jQuery:

(在jQuery中：)

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

In CSS:

(在CSS中：)

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