h3 Custom ordered lists number

ol.custom-counter
  li This is the first item
  li This is the second item
  li This is the third item
  li This is the fourth item
  li This is the fifth item
  li This is the sixth item
View Compiled 
// Variables
$body-font: sans-serif;
$counter-bg: rgb(0,200,200);

// Style
body {
  font-size: 1.2em;
  font-family: $body-font;
  margin: 50px;
}
ol.custom-counter {
  margin: 0;
  padding: 0;
  list-style-type: none;
  li {
    counter-increment: step-counter;
    margin-bottom: 10px;
    &:before {
      content: counter(step-counter);
      margin-right: 5px;
      font-size: 80%;
      background-color: $counter-bg;
      color: white;
      font-weight: bold;
      padding: 3px 8px;
      border-radius: 3px;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.