jQuery: Update CSS content property-CodePudding

I'm trying to dynamically set the content property of a CSS Style using jQuery. In the following Fiddle, I'd like the output to read "100% Completed" after the script executes.

JS Fiddle

I've tried just about every combination of CSS Selectors I could think of, and have failed miserably.

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%');

Thanks for any guidance!

CodePudding user response：

As shown in some answers on the relevant post linked in the comments, you could use the attr() function in CSS:

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

And change the content like:

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

https://jsfiddle.net/5jrL8g19/