0

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%";
}

JS

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

Thanks for any guidance!

RobertFrenette
  • 629
  • 3
  • 8
  • 29
  • 1
    Relevant: [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)](https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) *css :after and :before rules aren't part of the DOM, and therefore can't be selected using DOM methods* – freedomn-m Oct 11 '21 at 16:25
  • Ah, I didn't even think of that (pseudo-elements not part of the DOM). Makes perfect sense now, thanks. – RobertFrenette Oct 11 '21 at 16:31

1 Answers1

0

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/