CSS 카운터는 CSS 규칙에 의해 값이 증가할 수 있으면서, 사용된 횟수를 추적하기 위해 CSS에 의해 유지되는 “변수”입니다
카운터를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다

CSS 카운터는 “변수”와 같습니다. 변수 값은 CSS 규칙에 의해 증가될 수 있습니다 (사용되는 횟수를 추적함).

CSS 카운터로 작업하기 위해 다음 속성을 사용합니다.

• counter-reset - 카운터를 만들거나 재설정합니다.
• counter-increment - 카운터 값을 증가시킵니다.
• content - 생성된 콘텐츠를 삽입합니다.
• counter() 또는 counters() 함수 - 요소에 카운터 값을 추가합니다.

CSS 카운터를 사용하려면, 먼저 counter-reset으로 생성해야 합니다.

다음 예제는 페이지 (바디 셀렉터에서)에 대한 카운터를 만든 다음, 각 <h2> 요소에 대한 카운터 값을 증가시키고
각 <h2> 요소의 시작 부분에 “Section <value of the counter> :“를 추가합니다.