CSS counter() 함수

정의와 사용법

counter() 지정된 카운터의 현재 값을 문자열 형식으로 반환하는 함수입니다.

페이지에 카운터를 생성합니다( body 선택자에서). 각 <h2> 요소에 카운터 값을 추가하고, 각 <h2> 요소 앞에 "제几章" 텍스트를 추가합니다:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

카운터 스타일 설정:

body {
  counter-reset: section;
}
h2::before {
  counter-increment: section;
  content: "Section " counter(section, upper-roman) ": ";
}

counter(countername, counterstyle)

값	설명
countername	필수 사항. 카운터 이름( counter-reset 및 counter-increment 속성에서 사용하는 이름과 같습니다). 주의하세요, 이름은 대소문자를 구분합니다.
counterstyle	선택 사항. 카운터 스타일(리스트 스타일 타입의 값, @counter-style 이름 또는 symbols() 함수가 될 수 있습니다). 기본 값은 십진수입니다.

값

설명

countername

필수 사항. 카운터 이름( counter-reset 및 counter-increment 속성에서 사용하는 이름과 같습니다).

주의하세요, 이름은 대소문자를 구분합니다.

counterstyle

선택 사항. 카운터 스타일(리스트 스타일 타입의 값, @counter-style 이름 또는 symbols() 함수가 될 수 있습니다).

기본 값은 십진수입니다.

버전:	CSS3

크롬	에지	파이어폭스	사파리	오페라
지원	지원	지원	지원	지원