HooneyLog
© 2026 Seunghoon Shin. All rights reserved.
모든 게시글
CSS
2022. 8. 27.•
1

how to use counter property of “ol” element

Seunghoon Shin
작성자 Seunghoon Shin풀스택 개발자

What’s “counter-reset”?

  • The “counter-reset” property resets a counter to a given value and the counter's value is increased or decreased using the “counter-increment” CSS property

What’s “counter-increment”?

  • The counter-increment CSS property increases or decreases the value of a CSS counter  by a given value.

What’s “counter”?

  • The ”counter()” css function returns a string representing the current value of the named counter.

Example

ol { display:flex; padding:0; counter-reset:order 0; } li { list-style-type:none; } ol li::before { counter-increment:order 1; content:counter(order); display:flex; justify-content:center; align-items:center; width:var(--circle-width); aspect-ratio:1/1; border-radius:50%; border:var(--circle-border-width) solid black; font-size:var(--circle-font-size); margin:0 auto var(--circle-bottom-margin) auto; background-color:white; }
← 이전 글What is the DOCTYPE Declaration in HTML?
다음 글 →useFetch 커스텀 훅 만들기 (feat : reducer )