ｐタグに指定してるcssのカウントしたいのですが、１，２にならない

Question

ｐタグに指定してるcounter-increment: numberのcssのカウントしたいのですが、１，２にならないです
レクチャー頂ければ幸いです。

				<div class="lst_ol01">
				<section class="cf">
					<h3 class="tit_03">メニュー</h3>
						
						<p><a href="beauty_acupuncture.html">ｘｘｘｘ</a>
						<br><span class="bold">ｘｘｘｘ</span></p>
				</section>

				<section class="cf">
						
						<p><a href="female_body.html">ｘｘｘｘ</a>
						<br><span class="bold">ｘｘｘｘ</span></p>
				</section>
			</div>

scss

.lst_ol01 {
  margin: 1.0rem 0 1.0rem 2.6rem;
  p{
  line-height: 1.4;
  counter-increment: number 1;
  text-indent: -1.0rem;
  padding: 0 0 1.0rem 0;
  &::before {
    display: inline-block;
    content: counter(number)".";
    margin-right: .8rem;
    font-family: 'Lato', sans-serif;
    color: $clr_txt;
    font-weight: bold;
  }
  span {
    color: #01796e;
  }
}
}

Answer 1

どうもカウント対象の親となっている要素が閉じられるとカウンタはリセットされるようです。
この場合だったらsection要素にカウンタをつけてみては？

提示のHTMLの範囲では.lst_ol01 sectionにcounter-incrementを付けると1. 2.となります。

        .lst_ol01 section {
            counter-increment: number 1;
        }

Comments

[nanashissss]

sectionにつけるとpタグにつくカウントが１から始まってしまうんですよね。
カウント数を維持したいのですが

[nanashissss]

できました！ありがとうございます。