Styling an ordered list, and putting the numbers inside the list item

Question

I'm wondering if it's possible to do accomplish an effect similar to the screenshot below using <ol> in HTML.

I want each white bubble to be a <li> in the <ol>, that way if I change their order in the HTML, the numbers will update automatically. I cant figure out how to put the number inside the list item itself, and to prepend "Example #" before it.

Answer 1

You need to use CSS counters for this.

body {
  counter-reset: section;                   /* Set the section counter to 0 */
}
h3::before {
  counter-increment: section;               /* Increment the section counter*/
  content: "Section" counter(section) ": "; /* Display the counter */
}