CSS 카운터에서 자동 번호 매기기

CSS 카운터란?

문서의 위치에 따라 콘텐츠 표시 방법을 조정할 수 있습니다.
예를 들어 웹페이지의 제목 번호를 자동으로 흔들어서 사용합니다. 카운터는 본질적으로 CSS가 관리하는 변수이며 CSS 규칙에 따라 증가하고 몇 번 사용되었는지 추적하는 것입니다.
출처 : htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 그럼 / cs / ue b / 구이 / Cs / 이렇게 rs

랭킹, 목차 등에서 "넘버링하고 싶다"는 경우 CSS 카운터를 사용하면 좋은 느낌이 될 수 있습니다.
※이하, pug와 stylus로 쓰고 있습니다

ul
  - for(var x = 0; x < 5; x++)
    li sample

li
  list-style: none
  counter-increment: num
  &:before
    content: counter(num) "."

counter-increment : 요소의 일련 번호 (카운터) 값을 진행합니다. 값에 카운터 이름을 정의하면 페이지에 요소가 나타날 때마다 정의한 카운터 값이 진행됩니다.
속성을 적용하는 요소에 :before 또는 :after 의사 요소를 붙이고 content 속성에서 카운터 이름을 지정하여 요소 직전 또는 직후에 카운터 값을 삽입할 수 있습니다.

숫자 형식 표시 방법 변경

content: counter(num, 表示形式)

decimal
숫자(초기값)


lower-roman
로마 숫자(소문자)(예: ⅰ, ⅱ, ⅲ)

upper-roman
로마 숫자(대문자)(예: I, II, III)

lower-alpha
알파벳(소문자)(예: a, b, c)

cjk-ideographic
漢数字 (예 : 1, 2, 3)

hiragana
히라가나 (예 : 오, 이, 우)

katakana
가타카나 (예 : 아, 이, 우)

hiragana-iroha
이로하 순 (예 : 네, 로, 하)

katakana-iroha
イロハ順 (예 : 이, 로 우)


※cjk-ideographic에서 아래는 IE비대응

카운터 앞뒤에 문자열 삽입

content: "第" counter(num) "章 "

counters() 함수

counters() 함수를 사용하여 중첩된 카운터의 계층 구조 사이에 문자열을 삽입할 수 있습니다.
그 때, 아이 요소에 counter-reset 프로퍼티로 카운터의 값을 리셋트 하는 것이 포인트.

ul.parent
  - for(var x = 0; x < 3; x++)
    li sample
      ul.children
        - for(var y = 0; y < 2; y++)
          li test

li
  list-style: none
  counter-increment: num
.parent
  li
    &:before
      content: counter(num) "."  
.children
  counter-reset: num
  li
    &:before
      content: "第" counters(num, "-") "章 "

(편집 도중에 초안 보존한 채 방치하고 있던 기사를 드디어 썼습니다 w)