Using CSS to make an html numbered list have text before the number

I often use lists that look as follows:

  • Is in the format of Step #
  • Doesn’t indent.

It is a little more complex than it needs to be to do this in HTML but still doable.  The below list is an example.

  1. The first thing to do.
  2. The second thing to do.
  3. The third thing to do.

So how is it done? Well, it is done with CSS.

  1. Add your CSS
    ol.Steps {
    	counter-reset: section; // Make sure each new list starts at 1.
    	list-style-type: none;     // Removes the standard numbers.
    	padding: 0;                   // Removes padding so there is no indent.
    	margin-left: 0;               // Removes margin so there is no indent.
    ol.Steps li:before {
         counter-increment: section;                  // Defines the counter increment to use.
         content: "Step " counter(section) " - ";  // Adds content before your content.
  2. Add your html
    <ol class="Steps">
    	<li>The first thing to do.</li>
    	<li>The second thing to do.</li>
    	<li>The third thing to do.</li>

Easy enough.

This is also good when you need any word in front of the number such as: Chapter, Section, Item, etc…

Leave a Reply

How to post code in comments?