<div class="list-wrap">

  <div class="list">
    <div>My first item</div>
    <div>My second item</div>
    <div>My third item</div>
  </div>
  
</div>
body {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  font-family: Segoe UI;
  font-size:18px;
  background-color:#4d4c7d;
}
.list-wrap {
  padding:40px;
  background-color:#d8b9c3;
  border-radius:5px;
  width:400px;
}

div.list {
  counter-reset: list-number;
}
div.list div:before {
  counter-increment: list-number;
  content: counter(list-number);
  
  margin-right: 10px;
  margin-bottom:10px;
  width:35px;
  height:35px;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  font-size:16px;
  background-color:#d7385e;
  border-radius:50%;
  color:#fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.