CSS counter()

순서가 있는 목록을 만들 때 제목 앞에 숫자를 붙여야하는 상황이 많다.

이때 HTML에서 하드코딩하지 않고 CSS로 목록의 갯수를 세어 붙여주는 기능을 발견했다!

---

counter-increment

순서를 붙이기 위해 몇 가지 단계를 거쳐야한다. 그 중 첫 번째는 증가할 목록에 이름 붙이기.

.counter-item {
  counter-increment: section; /* 'section' 카운터를 1 증가 */
}

counter()

카운터의 값을 가져오는 함수. content 속성에서 사용한다. counter-increment에 적은 값을 적어주면 완료.

.counter-item::before {
  content: counter(section);
}

counter-reset

카운터를 초기화하는 속성. 특정 값으로 초기화 할 수도 있다.

.counter-container {
  counter-reset: section 5; /* 카운터 초기값을 5로 설정 */
}

---

응용

.counter-item::before {
  content: counter(num);
}

.counter-item:nth-child(-n+9)::before { /* 9이하 값에 0 붙이기 */
  content: "0" counter(num);
}