<ol class="num_point">
  <li><span>POINT</span>ショートケーキ</li>
  <li><span>POINT</span>オペラ</li>
  <li><span>POINT</span>フルーツタルト</li>
  <li><span>POINT</span>シュヴァルツヴェルダー・キルシュトルテ</li>
</ol>
/* style reset */
ol{
  counter-reset: item;
  list-style-type: none;
  margin: 20px 0 0;
  padding: 0;
}

/* num */
.num_point li{
  position:relative;
  padding-left: 110px;
  margin-bottom: 45px;
}
.num_point li:before {
  counter-increment: item;
  content: counter(item);
  color: #fff;
  font-size:20px;
  font-weight:bold;
  position:absolute;
  top: calc(50% - 15px);
  left:65px;
  z-index: 10;
}
.num_point li span {
  background: tomato;
  padding: 15px 40px 10px 10px;
  border-radius: 10px;
  color: #fff;
  position: absolute;
  top: calc(50% - 25px);
  left: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.