jQuery：更新 CSS 内容属性答案

【问题标题】：jQuery: Update CSS content propertyjQuery：更新 CSS 内容属性
【发布时间】：2021-11-30 09:26:59
【问题描述】：

我正在尝试使用 jQuery 动态设置 CSS 样式的 content 属性。在下面的 Fiddle 中，我希望脚本执行后的输出显示为“100% Completed”。

我几乎尝试了所有我能想到的 CSS 选择器组合，但都失败了。

HTML

<div data-chart="1">
  <div class="chart"><span> Completed</span></div>
</div>

CSS

[data-chart="1"] .chart:before {
  content: "50%";
}

// This obviously doesn't work
$('[data-chart="1"] .donut-chart:before').css('content', '100%');

感谢您的指导！

【问题讨论】：

相关：Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery) css :after 和 :before 规则不是 DOM 的一部分，因此不能使用 DOM 方法选择
啊，我什至没有想到（伪元素不是 DOM 的一部分）。现在很有意义，谢谢。

【解决方案1】：

如 cmets 中链接的相关帖子的一些答案所示，您可以在 CSS 中使用 attr() 函数：

[data-chart="1"] .chart:before {
  content: attr(data-before);
}

并更改内容，如：

$('[data-chart=1] .chart').attr('data-before', '100%');

【讨论】：