How To Make a Horizontal Ordered List With CSS


Horizontal numbered list
The digital services in Danish public libraries are not known for offering the best user experience. More often than not, it requires detailed explanations and step-by-step walkthroughs before you get to the content. It is all due to copyright agreements and licenses, but that is a different matter.

Related to an explanatory walkthrough of one of these services, I needed to create a step-by-step list. To utilize the screen real estate I wanted to make the list horizontal. This is how I solved it.

Mark Up

The HTML is a classic ordered list.

<ol class="steps">
  <li><strong>Item 1</strong><br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non gravida ante. Curabitur nec fermentum nisi, non interdum tortor. Pellentesque ac sapien sem.
  <li><strong>Item 2</strong><br />
    In blandit, justo tincidunt condimentum rhoncus, lectus sem scelerisque justo, quis tincidunt risus nunc vitae turpis. Suspendisse et aliquet nibh.
  <li><strong>Item 3</strong><br />
    Nullam a mollis mauris. Nam dictum nibh sed pharetra rhoncus. Sed posuere sed lacus quis congue. Integer sodales porttitor quam, at auctor sem tincidunt quis.
  <li><strong>Item 4</strong><br />
    Phasellus rutrum, elit vitae rutrum sodales, sem mauris luctus libero, non convallis leo dui sed quam. Duis blandit magna sit amet ornare dapibus.


The CSS looks like this. It is tested and works in IE8, but the red dots are rectangular instead of circular.

.steps {
  counter-reset: my-really-cool-counter;
  margin: 4em 0;
.steps li {
  font: normal 1em/1.5em Helvetica, Sans-Serif;
  position: relative;
  padding: 0 0 1.5em 3em;
  list-style: none;
.steps li:before {
  content: counter(my-really-cool-counter);
  counter-increment: my-really-cool-counter;
  color: #fff;
  display: block;
  left: 0;
  line-height: 2em;
  position: absolute;
  text-align: center;
  text-shadow: 0 2px 0 #cc0000;
  top: 0;
  width: 2em;
  z-index: 2;
.steps li:after {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 0;
  width: 0;
  background: #f00;
  border: 1em solid #f00;
  z-index: 1;
.steps li:first-child:nth-last-child(1) {
  width: 90%;
  width: calc(100% - 3em);
.steps li:first-child:nth-last-child(2), .steps li:first-child:nth-last-child(2) ~ li {
  min-width: 8em;
  width: 45%;
  width: calc(50% - 4em);
  float: left;
  padding-right: 1em;
.steps li:first-child:nth-last-child(3), .steps li:first-child:nth-last-child(3) ~ li {
  min-width: 8em;
  width: 27.5%;
  width: calc(33.333% - 4em);
  float: left;
  padding-right: 1em;
.steps li:first-child:nth-last-child(4), .steps li:first-child:nth-last-child(4) ~ li {
  min-width: 6em;
  width: 20%;
  width: calc(25% - 4em);
  float: left;
  padding-right: 1em;

If you want to know what is happening, I have also made a commented example in SASS syntax on Codepen.

Credits to Lea Verou for styling of the grid and to Roger Johansson for styling of the ordered, numbered lists.

Translations: Danish

Author: Morten Brunbjerg Bech

Webdesigner, front end udvikler og bibliotekar. Arbejder primært med udvikling og design af Horsens Kommunes Bibliotekers webløsninger og er specialist i semantisk strukturering af webdokumenter samt Adobe Photoshop og Illustrator.

Leave a Reply