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.

Example of what I want to do

Praveen Kumar Purushothaman · Accepted Answer · 2015-06-11 16:30:39Z

2

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

answered Jun 11, 2015 at 16:30

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Harry Over a year ago

Counters is the best suited for this one because the counter value can also be used for the content. +1

Emma Ramirez Over a year ago

You can do this with the ol/li, without ::before or ::after, but I believe it only works on mozilla.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related