CSS 카운터() 함수
예시
페이지에 대한 카운터를 만듭니다(본문 선택기에서). 각 <h2> 요소에 대한 카운터 값을 늘리고 각 <h2> 요소 앞에 "섹션 < 카운터 값 >:" 텍스트를 추가합니다.
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
counter() 함수는 명명된 카운터의 현재 값을 문자열로 반환합니다.
버전: | CSS3 |
---|
브라우저 지원
Function | |||||
---|---|---|---|---|---|
counter() | Yes | Yes | Yes | Yes | Yes |
CSS 구문
counter(countername,
counterstyle)
Value | Description |
---|---|
countername | Required. The name of the counter (which is the same name used for the counter-reset and counter-increment properties) |
counterstyle | Optional. The style of the counter (can be a list-style-type value) |
더 많은 예
예시
카운터 스타일 설정:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section,
upper-roman) ": ";
}
관련 페이지
CSS 참조: 콘텐츠 속성
CSS 참조: 카운터 증가 속성
CSS 참조: counter-reset 속성