CodePen Embed - Styling numbered lists with CSS

<html>
  <body>
    <ol>
      <li>Surabaya</li>
      <li>Malang</li>
      <li>Jakarta</li>
      <li>Bali</li>
      <li>Yogyakarta</li>
    </ol>
  </body>
</html>

ol {
   list-style: none;
   counter-reset: item;
 }
 li {
   counter-increment: item;
   margin-bottom: 15px;
 }
 li:before {
   margin-right: 10px;
   content: counter(item);
  border:1px solid #ccc;
   border-radius: 100%;
   width:40px;
   height:40px;
   line-height:40px;
   text-align: center;
   display: inline-block;
 }

This Pen is owned by 99layout on CodePen.

See more by @99layout on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.