Как сделать точку квадратной в нумерованном списке?

Question

[Mak_Pet]

Стилизовал нумерованный список, но точка рядом с цифорой должна быть квадратной. При меньшем размере шрифта можно было бы обойтись и круглой, но тут это сильно бросается в глаза.

<ol>
   <li>EVERY DAY, MORE THAN 1,000 JORNEYS</li>
   <li>MORE THAN 240 MISSIONS</li>
   <li>29 SORTING AND DISTRIBUTION CENTERS</li>
   <li>MORE THAN 1 THOUSAND EMPLOYEES</li>
 </ol>

.about .about-items.delivery-solutions ol {
    font-size: 24px;
    font-weight: 500;
    line-height: 39px;
    text-transform: uppercase;
    color: #37393e;

    padding: 0 0 0 0;
    margin: 0 0 0 0;

    counter-reset: myCounter;
}

.about .about-items.delivery-solutions ol > li {
    list-style: none;
}

.about .about-items.delivery-solutions ol > li+li {
    margin-top: 26px;
}

.about .about-items.delivery-solutions ol > li:before {
    counter-increment: myCounter;
    content: counter(myCounter) ".";

    font-size: 40px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0.8px;
    color: #8d8d8d;

    margin-right: 3px;
}

Answer 1

[apoca1ipsis]

Может что-то подобное попробовать?

<ol>
  <li><span>EVERY DAY, MORE THAN 1,000 JORNEYS</span></li>
  <li><span>MORE THAN 240 MISSIONS</span></li>
  <li><span>29 SORTING AND DISTRIBUTION CENTERS</span></li>
  <li><span>MORE THAN 1 THOUSAND EMPLOYEES</span></li>
</ol>

.about .about-items.delivery-solutions ol li span {
    position: relative;
    padding-left: 12px;
}

.about .about-items.delivery-solutions ol li span::before {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    background: #f00;
    position: absolute;
    left: 0;
    bottom: 0;
}