numbered bullet list circles - just css

by ian_smithz

HTML

<ol class="custom">
  <li><a href="/customer/account/login/">Sign in</a> from your desktop PC, tablet or smart phone</li>
  <li>Find your product through <a href="/sales/order/history/">Order History</a> or search facility</li>
  <li>Write and submit your review</li>
</ol>

<p>Your feedback is important to us and other Screwfix customers.</p>

CSS

ol.custom {
  padding: 0 0 0 73px;
  list-style: none;
  counter-reset: numList;
}

ol.custom li {
  position: relative;
  margin: 0 0 46px 0;
  padding: 4px 8px;
}

ol.custom li:before {
  counter-increment: numList;
  content: counter(numList);
  position: absolute;
  left: -73px;
  top: -10px;
  text-align: center;
  color: #0053a0;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  background: #fff;
  border-radius: 50%;
  border: 1px solid #d1d1d1;
  font-family: archivo_narrowbold, sans-serif;
  font-weight: 400;
  font-size: 32px;
    /*padding: 4px;*/
  line-height: 44px;
}