CSS 카운터로 제목이나 목록 번호를 자동 생성합니다.
counter-reset으로 시작하고 counter-increment로 증가시키며 content에서 counter() 값을 표시합니다. 시각적 번호일 뿐 문서 의미에는 HTML ol이 더 적합할 수 있습니다.
counter-reset이 .chapters에서 chapter 카운터를 0으로 시작하고, h2를 만날 때마다 counter-increment가 1씩 올립니다. 증가는 h2 자신에게 먼저 적용되므로 그 안의 ::before는 이미 늘어난 값을 읽어 HTML, CSS, JavaScript 앞에 1. 2. 3.을 차례로 붙이고, 번호와 마침표만 초록색이 됩니다. 사이사이의 p는 카운터를 건드리지 않아 번호가 끊기지 않습니다.
중첩된 목차에서는 counter() 대신 counters()를 쓰면 바깥 단계부터 안쪽 단계까지의 값을 구분 문자로 이어 1.2.3 같은 번호를 만듭니다. 안쪽 요소에서 같은 이름의 카운터를 다시 counter-reset하면 그 아래에 새 단계가 생기는 원리를 이용합니다.
화면에 보이는 카운터 값이 데이터나 접근 가능한 이름으로 반드시 전달된다고 가정하지 마세요.
직접 바꿔보세요카운터 시작값을 3으로 바꾸세요.