Skip underlining counter [duplicate]

Question

I am trying to underline the headings (h2/h3 elements) for my page, but I also want them numbered. How can I skip underlining the numbers? So I want it to look like

1. <u>First heading</u>

rather than

<u>1. First heading</u>

How should I modify my code?

h2 {
    text-decoration: underline;
      text-decoration-color:#222;
      text-decoration-skip-ink:initial;
      color:#564;
}

h3 {
  text-decoration-color:#856;
  color:#333;
}
h1 {
        counter-reset: h2counter;
    }
    h2:before {
        content: counter(h2counter) ".\0000a0\0000a0";
        counter-increment: h2counter;
        counter-reset: h3counter;
        text-decoration:none;
    }

Answer 1

Just add display: inline-block to the ::before pseudo-element

h2 {
  text-decoration: underline;
  text-decoration-color: #222;
  text-decoration-skip-ink: initial;
  color: #564;
}

h3 {
  text-decoration-color: #856;
  color: #333;
}

h1 {
  counter-reset: h2counter;
}

h2::before {
  content: counter(h2counter) ".\0000a0\0000a0";
  counter-increment: h2counter;
  counter-reset: h3counter;
  text-decoration: none;
  display: inline-block;
}

<h2>Test</h2>