<tutorialjinni.com/>

CSS Style Ordered List numbers

Posted Under: CSS3, Snippets on Aug 17, 2018
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!
© Tutorial Jinni