CODEWITHSUNDEEP
htmlcsswebhtml-lists
AtomicStrongForce
AtomicStrongForce

Reputation: 701

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

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.

Example of what I want to do

Upvotes: 0

Views: 148

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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 */
}

Upvotes: 2

Related Questions