Add background colour to an Ordered List

Question

I have an ordered list with numbers 1,2,3 etc. How can I add background colour to the numbers 1,2,3 and also remove the dot after each of these numbers?

JSFIDDLE

<ol>
 	<li>Prep ingredients and Sauté if required.</li>
 	<li>Add ingredients to inner pot.</li>
 	<li>Close the lid. Set release to 0.</li>
</ol>

Answer 1

.bg-yellow:before {
      background-color: yellow;
    }
    .bg-red:before {
      background-color: red;
    }
    .bg-green:before {
      background-color: green;
    }
    .bg-orange:before {
      background-color: orange;
    }
    .bg-aqua:before {
      background-color: aqua;
    }
    ol {
      counter-reset: myOrderedListItemsCounter;
    }
    ol li {
      list-style-type: none;
      position: relative;
    }
    ol li:before {
      counter-increment: myOrderedListItemsCounter;
      content: counter(myOrderedListItemsCounter)" ";
      margin-right: 0.5em;
    }

<ol>
      <li class="bg-yellow">Yellow here</li>
      <li class="bg-red">Red here</li>
      <li class="bg-orange">Orange here</li>
      <li class="bg-green">Green here</li>
      <li class="bg-aqua">Aqua here</li>
    </ol>