Custom Ordered List

Custom ordered lists using counter-increment and Flexbox.

by Jon Fuller

HTML

<ol class="custom-list">
  <li>List Item One</li>
  <li>List Item Two</li>
  <li>List Item Three and is really long to see what happens when it wraps to the next line or two. Heck maybe even to line three?! List Item Three and is really long to see what happens when it wraps to the next line or two. Heck maybe even to line three?!</li>
  <li>List Item Four</li>
  <li>List Item Five</li>
</ol>

CSS

ol.custom-list {
  list-style: none;
}
ol.custom-list > li {
  margin-bottom: 0.5em;
  counter-increment: bullets;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 2em;
}
ol.custom-list > li::before {
  content: counter(bullets);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  font-size: 0.75em;
  border-radius: 50%;
  background-color: tomato;
  position: absolute;
  left: 0;
}