Buttons numbered as in

Question

My code is like this

  <ol>
    <li><button>Button</button></li>
    <li><button>Button</button></li>
    <li><button>Button</button></li>
  </ol>

Ordered numbers are written before buttons, but I want them inside buttons without manually writing them in like I do there

  <ol>
    <li><button>1. Button</button></li>
    <li><button>2. Button</button></li>
    <li><button>3. Button</button></li>
  </ol>

It would be easy just to put < li > tag inside the button, but sadly it is not working. Is there any workaround on how to do it in HTML/CSS? (no javascript, please. I know how to do it with js).

Codepen link https://codepen.io/Robovision/pen/ExPLxLE

Answer 1

CSS counter https://developer.mozilla.org/en-US/docs/Web/CSS/counter

ol {
  list-style: none;
  counter-reset: olCounter;
}

li {
  counter-increment: olCounter;
}

li button::before {
  content: counter(olCounter) ". ";
}

<ol>
  <li><button>Button</button></li>
  <li><button>Button</button></li>
  <li><button>Button</button></li>
</ol>