Не инкрементируется счетчик counter в css

<main>
<h1 class="page-title">nth-child</h1>
<section class="example">
    <div class="container">
        <h2 class="example-title">:first-child</h2>
    </div>
</section>
<section class="example">
    <div class="container">
        <h2 class="example-title">:last-child</h2>
    </div>
</section>

<div class="hello">
    <h5>hello</h5>
    <h5>hello</h5>
    <h5>hello</h5>
    <h5>hello</h5>
    <h5>hello</h5>
</div>

Вот никак не пойму в чем проблема, вроде смотрел как его реализовывать и в классе hello все работает, а вот с h2 непонятно по какой причине не срабатывает, не увеличивается значение счетчика

    .container{
    counter-reset: h2;
}

.container h2::before{
    counter-increment: h2;
    content: counter(h2) '.';
    width: 35px;
    height: 35px;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    border: 6px solid rgba(185, 35, 18, 0.862);
    display: flex;
    align-items: center;
    justify-content: center; 
}

.hello{
    counter-reset: h5;
}

.hello h5::before{
    counter-increment: h5;
    content: counter(h5) '.';
}

Вот никак не пойму в чем проблема, вроде смотрел как его реализовывать и в классе hello все работает, а вот с h2 непонятно по какой причине не срабатывает, не увеличивается значение счетчика