Нумерованный список OL c оформлением цифры в кружках, без точек

Решение, как сделать своё оформление нумерованного списка ol с атрибутом start для редактора с блоками WordPress Gutenberg

• Атрибут start у нумерованных списков ol и css counter.
• Нумерованный список с указанием стартового значения для блоков в WordPress Gutenberg.
• Нумерованный список — цифры в кружках.

Демонстрация

HTML

<ol type="1">
  <li>один</li>
  <li>один</li>
</ol>
<ol start="2">
  <li>два</li>
</ol>
<ol start="3">
  <li>три</li>
</ol>
<ol start="4">
  <li>четыре</li>
</ol>
<ol start="5">
  <li>пять</li>
</ol>

CSS

ol {
   list-style: none;
   counter-reset: lis
}
li {
  counter-increment: lis;
  margin:10px 0;
}
li::before {
  content: counter(lis); 
  border:2px solid red;
  border-radius:50%;
  display: inline-block; 
  width: 1.2em;
  height: 1.2em;
  text-align: center;
  margin-right:5px;
} 

JS

$("ol[start]").each(function() {
  var   val=1;
    if ( $(this).attr("start")){
  val =  $(this).attr("start");
    }
  val=val-1;
 val= 'lis '+ val;
$(this ).css('counter-increment',val );
});