如何将CSS页面计数器赋给变量？

<div class="counter">1</div>

.counter {
  counter-reset: my-counter;
}

.counter::before {
  counter-increment: my-counter;
  content: counter(my-counter);
}

var counterElement = document.querySelector('.counter');
var counterValue = window.getComputedStyle(counterElement, '::before').content;