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.
- The first thing to do.
- The second thing to do.
- The third thing to do.
So how is it done? Well, it is done with CSS.
- 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. } - 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> </ol>
Easy enough.
This is also good when you need any word in front of the number such as: Chapter, Section, Item, etc…
