How to get pseudo element's computed value?

Question

I have a counter in a psuedo class in my CSS, something like this,

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

and I want the computed value of counter.

I have tried using

getComputedStyles(document.getElementById("1"), '::before')

but that returns Section " counter(section) ":, whereas I am trying to get the actual value that it displays. which is Section 1:

This is the demo HTML snippet that I have been testing with,

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

<h2 id="1">HTML Tutorial</h2>

Possible duplicate of [How to access CSS generated content with JavaScript](https://stackoverflow.com/questions/2651739/how-to-access-css-generated-content-with-javascript) — Vaviloff, Oct 03 '19 at 06:01

score 0 · Answer 1 · answered Oct 03 '19 at 06:01

0

Unfortunately with current CSS specification it isn't possible. See why and what to do instead in this answer

answered Oct 03 '19 at 06:01

Vaviloff

1 Answers1