CSS counters() 함수

정의와 사용법

CSS의 counters() 함수는 이름이 있는 카운터와 내장 카운터의 현재 값을 문자열 형식으로 반환합니다.

여기서는 다음과 같이 사용합니다 counters() 함수는 다른 등급의 내장 카운터 간에 문자열을 삽입합니다.

예제

예제 1

여기서는 다음과 같이 사용합니다 counters() 함수는 다른 등급의 내장 카운터 간에 문자열(점)을 삽입합니다:

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

직접 테스트해 보세요

예제 2

카운터 스타일을 설정하고 연결 문자열을 "-"로 설정합니다:

ol {
  counter-reset: section;
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, "-", lower-alpha) " ";
}

직접 테스트해 보세요

CSS 문법

counters(countername, string, counterstyle)
값 설명
countername

필수. 카운터 이름(counter-reset 및 counter-increment 속성에서 사용하는 이름과 동일해야 합니다).

주의. 이름은 대소문자를 구분합니다.
string 필수. 연결 문자열. 어떤 텍스트 문자도 될 수 있습니다.
counterstyle

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

기본 값은 decimal입니다.

기술 세부 사항

버전: CSS3

브라우저 지원

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

관련 페이지

강의:CSS 카운터

참조:CSS 컨텐트 속성

참조:CSS 카운터 인크리먼트 속성

참조:CSS 카운터 리셋 속성

참조:CSS @컨터-스타일 규칙

참조:CSS 컨터() 함수