Paulcraey Paulcraey - 1 month ago 9
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

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;
}
<ul>
  <li>content1</li>
  <li>content2</li>
  <li>content3</li>
</ul>