CSS Style Ordered List numbers

This CSS snippet will stylized order list using :before pseudo CSS element.

.stylized-ordered-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  font-size: 1.2em;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}
.stylized-ordered-list li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}
.stylized-ordered-list li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: #009688;
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

Sample HTML ordered list

<ol class="stylized-ordered-list">
  <li>Crack eggs in a bowl, add the milk, and whisk until yolks break.</li>
  <li>Add milk, peppers, and onions and whisk again.</li>
  <li>Put bowl in microwave and cook for 1 minute, checking occasionally.</li>
  <li>Take out bowl, put omelet on a plate, sprinkle cheese and cook for 30 seconds to melt cheese.</li>
  <li>Take out and enjoy!</li>
</ol>

Sample output render

1. Crack eggs in a bowl, add the milk, and whisk until yolks break.
2. Add milk, peppers, and onions and whisk again.
3. Put bowl in microwave and cook for 1 minute, checking occasionally.
4. Take out bowl, put omelet on a plate, sprinkle cheese and cook for 30 seconds to melt cheese.
5. Take out and enjoy!