counter 사용하기

속성

counter-reset: 카운터이름 시작숫자

초기화 하는 속성으로 카운터 이름을 지정하고, 초깃값은 ‘0’ 이다.

초깃값을 설정하려면 이름을 지정하고 시작 숫자를 입력한다.

counter-reset: my-counter;

counter-reset: my-counter -1;

// 두 개의 카운터와 시작이 1과 4이다.
counter-reset: counter1 1 counter2 4; 

---

counter-increment: 카운터이름 증가할숫자

counter-reset에서 초기화 된 counter의 값은 counter-increment에 따라 증가하거나 감소한다.

숫자를 얼마씩 증가시킬 지 지정할 수 있다.

// 1씩 증가
counter-increment: my-counter;

// -1씩 축소
counter-increment: my-counter -1;

---

content: counter(카운터이름, 스타일)

counter 값은 content 속성에서 표시할 수 있다.

응용 예시

body {
  counter-reset: section;                       /* counter 이름을 'section'으로 지정합니다.
                                                   초깃값은 0입니다. */
}

h3::before {
  counter-increment: section;                   /* section의 카운터 값을 1씩 증가시킵니다. */
  content: "Section " counter(section) ": ";    /* section의 카운터 값을 표시합니다. */
}

<h3>Introduction</h3>
  <h3>Body</h3>
  <h3>Conclusion</h3>

Reference

CSS 카운터 사용하기 - CSS: Cascading Style Sheets | MDN

[CSS] :before, :after에 counter()를 사용하여 숫자 리스트 표현하기