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

您还可以将内容传递给具有数据属性的伪元素，然后使用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';
}

你可能会认为这将是一个简单的问题，包括jQuery可以做的其他一切。不幸的是，问题归结为一个技术问题：css ：after和：before规则不是DOM的一部分，因此不能使用jQuery的DOM方法进行更改。

有一些方法可以使用JavaScript和/或CSS解决方法来操作这些元素;您使用哪一个取决于您的确切要求。

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

1） 添加/删除预定类

在此方法中，您已经在 CSS 中创建了一个具有不同或样式的类。将此“new”类放在样式表的后面，以确保它覆盖：:after:before

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

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

$('p').on('click', function() {
    $(this).toggleClass('special');
});

    $('p').on('click', function() {
      $(this).toggleClass('special');
    });

p:before {
  content: "foo";
  color: red;
  cursor: pointer;
}
p.special:before {
  content: "bar";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

• 优点：易于用jQuery实现;一次快速更改多种样式;强制分离关注点（将 CSS 和 JS 与 HTML 隔离）
• 缺点：CSS 必须是预先编写的，因此 的内容不是完全动态的:before:after

2） 将新样式直接添加到文档的样式表中

可以使用 JavaScript 将样式直接添加到文档样式表中，包括 和 样式。jQuery没有提供方便的快捷方式，但幸运的是JS并不那么复杂：:after:before

var str = "bar";
document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

var str = "bar";
document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');

p:before {
  content: "foo";
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

.addRule（） 和相关的 .insertRule（） 方法在今天得到了很好的支持。

作为变体，您还可以使用jQuery向文档添加全新的样式表，但必要的代码并不干净：

var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');

var str = "bar";
$('<style>p.special:before{content:"' + str + '"}</style>').appendTo('head');

p:before {
  content: "foo";
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

如果我们谈论的是“操作”值，而不仅仅是添加它们，我们还可以使用不同的方法读取现有的：after或：before样式：

var str = window.getComputedStyle(document.querySelector('p'), ':before') 
           .getPropertyValue('content');

var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');
console.log(str);

document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');

p:before {
    content:"foo";
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p class="special">This is a paragraph</p>
<p>This is another paragraph</p>

当使用jQuery时，我们可以用$（'p'）[0]替换，因为代码稍微短一些。document.querySelector('p')

• 优点：任何字符串都可以动态插入到样式中
• 缺点：原始样式不会改变，只是被覆盖;重复（ab）使用会使DOM任意变大

3） 更改不同的 DOM 属性

您还可以在 CSS 中使用 attr（） 来读取特定的 DOM 属性。（如果浏览器支持 ：before，它也支持 attr（）。通过将其与一些精心准备的CSS相结合，我们可以动态地更改内容（但不是其他属性，如边距或颜色）：content::before:after

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

JS：

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

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

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

如果无法提前准备CSS，这可以与第二种技术相结合：

var str = "bar";

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

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

var str = "bar";
document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');

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

p:before {
  content: "foo";
  color: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

• 优点：不会创造无穷无尽的额外样式
• 缺点：在CSS中只能应用于内容字符串，而不适用于URL或RGB颜色attr