Paulcraey Paulcraey - 1 year ago 68
CSS Question

Can I add text to my list numbering

I have an ordered list like

  1. content1

  2. content2

  3. content3

As it is for a road trip route, I want it to be:

Day 1 : content1

Day 2 : content2

Day 3 : content3

I can of course write it down as text, but i prefer having it as a list.
Is this possible?

Answer Source

You can do it without positioning the list items - resetting the list and letting pseudo elements to do the rest:

  1. Reset the list style using list-style-type:none and padding:0

  2. Now use an increment counter to get the required list numbering

See demo below:

ul {
  list-style-type: none;
  padding: 0;
  counter-reset: list;
ul li:before {
  content: 'Day ' counter(list) ' : ';
  counter-increment: list;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download