dtに自動的にcounter（番号）をつける

HTML

test.php

<div class="event_prize">
	<ul class="event_prize-list list-number">
		<li>
			<dl>
				<dt>テスト１</dt>
				<dd>菅義偉官房長官は１２日の記者会見で、ロシアのプーチン大統領が前提条件をつけずに年内の平和条約締結を提案したことに対し、</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt>テスト２</dt>
				<dd>「政府としては北方四島の帰属の問題を解決して平和条約を締結する基本方針に変わりはない」と述べ、否定的な考えを示した。</dd>
			</dl>
		</li>
		<li>
			<dl>
				<dt>テスト３</dt>
				<dd>菅氏は１０日の安倍晋三首相とプーチン氏の首脳会談について「両首脳間で、ご指摘のような発言があったということは承知していない」と強調した。</dd>
			</dl>
		</li>
	</ul>
</div>

SCSS

_test.scss

.event_prize {
	.event_prize-list {
		> li {
			&:not(:last-child) {
				margin-bottom: 15px;
			}

			dl {
				margin-top: 5px;

				dt {
					position: relative;
					padding: 0 0 0 1em;
					font-family: FOT-ロダンNTLG Pro EB;
					font-size: 0.75rem;
					line-height: (20/13);

					&::before {
						content: "\2022";
						position: absolute;
						top: 0;
						left: 0;
					}
				}

				dd {
					margin-top: 8px;
					margin-left: 15px;
					font-size: 0.75rem;
					line-height: (20/13);

					a {
						color: #fff100;
						text-decoration: underline;
					}
				}
			}
		}
	}

	.list-number {
		counter-reset: count;

		> li {
			dl {
				dt {
					padding: 0 0 0 1.5em;
				}

				dt::before {
					content: counter(count) ".";
					counter-increment: count;
				}
			}
		}
	}
}


@media only screen and (min-width: 768px) {
  .event_prize {
		.event_prize-list {
			> li {
				dl {
					margin-top: 0;
					overflow: auto;

					dt {
						font-size: 1rem;
						line-height: (22/15);
					}

					dd {
						font-size: 0.875rem;
						line-height: (20/14);
					}
				}
			}
		}
  }
}