CSS counter로 ol 요소 순서 직접 표현하기

TL;DR#

• counter-reset로 카운터를 초기화하고, counter-increment로 값을 늘리거나 줄이며, counter() 함수로 그 값을 화면에 표시합니다.
• 이 세 속성을 조합하면 ol 요소의 순서를 기본 마커 대신 원하는 모양(예: 원형 배지)으로 직접 그릴 수 있습니다.
• 아래 예제는 li::before에 카운터 값을 넣어 동그란 번호 배지를 만드는 방식입니다.

세 가지 속성의 역할#

counter-reset#

counter-reset 속성은 카운터를 지정한 값으로 초기화합니다. 이렇게 초기화한 카운터의 값은 counter-increment 속성으로 증가하거나 감소합니다.

counter-increment#

counter-increment 속성은 CSS 카운터의 값을 지정한 만큼 증가하거나 감소시킵니다.

counter()#

counter() 함수는 지정한 카운터의 현재 값을 나타내는 문자열을 반환합니다. 이 문자열을 content 속성에 넣어 화면에 표시합니다.

예제#

ol에서 카운터를 초기화하고, 각 li::before에서 값을 증가시킨 뒤 content로 출력해 동그란 번호 배지를 만듭니다.

복사
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;
}

ol에서 counter-reset:order 0로 order라는 카운터를 0으로 초기화합니다. 이후 li::before마다 counter-increment:order 1로 값을 1씩 올리고, content:counter(order)로 현재 값을 배지 안에 출력합니다. list-style-type:none으로 기본 마커는 숨겼습니다.