радиус границы: 50%; НЕ образует круг

Question

Синий круг, окружающий число «1» в классе ol.circle > li::before, вовсе не круг. Зачем? Вот JSFiddle.

Не обращайте внимания на цветные borders - они только для визуального контроля того, что все объекты центрированы по вертикали.

.meaning {
  color: #1f2c60;
  font-weight: 700;
  font-size: calc(0.5em + 2.3vw);
  border: 1px solid red;
}

ol.circle {
  position: relative;
  list-style-type: none;
  padding-left: 2.7em;
  border: 1px solid green;
}

li {
  line-height: calc(0.5em + 2.3vw);
  counter-increment: item;
  border: 1px solid blue;
}

ol.circle > li::before {
  transform: translateX(-150%);
  content: counter(item);
  display: inline-flex;
  border-radius: 50%;
  justify-content: center;
  background: #1f2c60;
  color: white;
  border: 1px solid purple;
 }

<div class="meaning">
<ol class="circle">
<li>THIS is my text</li>
</ol>
</div>

Answer 1

Ну чтобы сделать круг. Вы должны указать одно и то же значение height и width

например,

.meaning {
  color: #1f2c60;
  font-weight: 700;
  font-size: calc(0.5em + 2.3vw);
  border: 1px solid red;
}

ol.circle {
  position: relative;
  list-style-type: none;
  padding-left: 2.7em;
  border: 1px solid green;
}

li {
  line-height: calc(0.5em + 2.3vw);
  counter-increment: item;
  border: 1px solid blue;
}

ol.circle > li::before {
  transform: translateX(-150%);
  content: counter(item);
  display: inline-flex;
  border-radius: 50%;
  justify-content: center;
  background: #1f2c60;
  color: white;
  border: 1px solid purple;
  height:30px;
  width:30px;
 }

<div class="meaning">
<ol class="circle">
<li>THIS is my text</li>
</ol>
</div>

ОБНОВЛЕННЫЙ ОТВЕТ

Как насчет этого? Я добавил padding: 4px 0 4px 2.7em; к вашему ol.circle элементу.

.meaning {
  color: #1f2c60;
  font-weight: 700;
  font-size: calc(0.5em + 2.3vw);
  border: 1px solid red;
}

ol.circle {
  position: relative;
  list-style-type: none;
  /* padding-left: 2.7em; */
  padding: 4px 0 4px 2.7em;
  border: 1px solid green;
}

li {
  line-height: calc(0.5em + 2.3vw);
  counter-increment: item;
  border: 1px solid blue;
}

ol.circle > li::before {
  position: absolute;
  transform: translateX(-150%);
  content: counter(item);
  display: inline-flex;
  border-radius: 50%;
  justify-content: center;
  background: olive; /* #1f2c60 */
  color: white;
  border: 1px solid purple;
  width: calc(0.5em + 2.3vw - 2px);     /* CIRCLE BOTTOM TOUCHES GREEN BORDER WITHOUT "-2px" */
  height: calc(0.5em + 2.3vw - 2px);    /* CIRCLE BOTTOM TOUCHES GREEN BORDER WITHOUT "-2px" */ 
 }

<div class="meaning">
  <ol class="circle">
      <li>THIS is my text</li>
  </ol>
</div>