リストの数字が変わらない

Question

実現したいこと

リストの数字を1、2、3と変化させたい。
初歩的な質問で恐縮ですが、変わらないのでご教授いただけますと幸いです。

該当のソースコード

    <section class="pain__sick">
      <h3 class="pain__sick__title js-fade">代表的な対象疾患</h3>

      <div class="pain__sick__box">
        <ol class="pain__sick__list">
          <li class="pain__sick__item">
            <h4 class="pain__sick__item-title">関連事項</h4><!-- /.pain__sick__item-title -->
            <p class="pain__sick__item-text">と書いてしまうのはよくあることです。また、使用する画像のファイル名にスペルミスがある場合も。さらに、jpgやpngなどのつけ忘れもまれにあります。</p><!-- /.pain__sick__text -->
          </li><!-- /.pain__sick__item -->
        </ol><!-- /.pain__sick__list -->

        <fugure class="pain__sick__figure">
          <img src="/assets/images/dummy_thumbnail.jpg" alt="写真" class="pain__sick__image">
        </fugure><!-- /.pain__sick__figure -->
      </div><!-- /.pain__sick__box-->

      <div class="pain__sick__box">
        <ol class="pain__sick__list">
          <li class="pain__sick__item">
            <h4 class="pain__sick__item-title">関連事項</h4><!-- /.pain__sick__item-title -->
            <p class="pain__sick__item-text">と書いてしまうのはよくあることです。また、使用する画像のファイル名にスペルミスがある場合も。さらに、jpgやpngなどのつけ忘れもまれにあります。</p><!-- /.pain__sick__text -->
          </li><!-- /.pain__sick__item -->
        </ol><!-- /.pain__sick__list -->

        <fugure class="pain__sick__figure">
          <img src="/assets/images/dummy_thumbnail.jpg" alt="写真" class="pain__sick__image">
        </fugure><!-- /.pain__sick__figure -->
      </div><!-- /.pain__sick__box-->

      <div class="pain__sick__box">
        <ol class="pain__sick__list">
          <li class="pain__sick__item">
            <h4 class="pain__sick__item-title">関連事項</h4><!-- /.pain__sick__item-title -->
            <p class="pain__sick__item-text">と書いてしまうのはよくあることです。また、使用する画像のファイル名にスペルミスがある場合も。さらに、jpgやpngなどのつけ忘れもまれにあります。</p><!-- /.pain__sick__text -->
          </li><!-- /.pain__sick__item -->
        </ol><!-- /.pain__sick__list -->

        <fugure class="pain__sick__figure">
          <img src="/assets/images/dummy_thumbnail.jpg" alt="写真" class="pain__sick__image">
        </fugure><!-- /.pain__sick__figure -->
      </div><!-- /.pain__sick__box-->
    </section>

.pain {
    &__sick__title {
        position: relative;
        @include fs(30);
        text-align: center;
        font-family: $font-noto-serif;
        margin-bottom: 0.8em;
        padding-bottom: 0.73em;
        letter-spacing: 0.1em;

        &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 4em;
            height: 1px;
            background-color: $color-bluegray2;
        }
    }

    &__sick__box {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;


        @include mq(md) {
            flex-direction: column-reverse;
        }

    }

    &__sick__list {
        width: calc((550 / 1024)*100%);

    }

    &__sick__item {
        padding: 10px;
        margin-bottom: 0.4em;

        &:before {
            counter-increment: li_count;
            content: counter(li_count);
            @include fs(22);
            color: $color-white;
            background: $color-navy;
            border-radius: 50%;
            display: inline-block;
            width: 2.2em;
            height: 2.2em;
            text-align: center;
            margin-right: 0.7em;
        }
    }

    &__sick__item-title {
        @include fs(24);
        line-height: 2;
        display: inline-block;
        margin-bottom: 0.8em;
    }

    &__sick__item-text {
        @include fs(18);
        line-height: 1.5;
    }

    &__sick__figure {
        aspect-ratio: 433 / 250;
        max-width: 433px;
        width: calc((433 / 1024)*100%);
        height: auto;
        object-fit: cover;

        @include mq(md) {
            width: 100%;
        }
    }
}

試したこと

ネットで調べても分かりませんでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

li_count を初期化する必要があります。.pain__sick かどこかに counter-reset: li_count; を入れてください。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters#%E3%82%AB%E3%82%A6%E3%83%B3%E3%82%BF%E3%83%BC%E3%81%AE%E5%80%A4%E3%81%AE%E6%93%8D%E4%BD%9C

カウンターを使用するには、最初に必ず counter-reset プロパティで値を初期化する必要があります。

Comments

[spn]

分かりやすい説明ありがとうございます！！

Answer 2

olにまたがって番号は振られません、どうしてもということであればolごとにstartを設定してください

<ol type="1">
<li>a</li>
</ol>
<ol start="2">
<li>b</li>
</ol>
<ol start="3">
<li>c</li>
<li>d</li>
</ol>