[CSS] ol 리스트 스타일 커스텀하기 (counter-reset, counter-increment)

ol 리스트 depth 별 스타일 지정하기

ol 에 리스트 스타일 이름을 지정해주고 li 에 지정된 리스트 이름을 연결 시키고, li:before 요소에 표현 방법을 구현하면 된다.

ol {
  counter-reset: type1;
  li:before {
    counter-increment: type1;
    content: counter(type1) ". ";
  }
}

 

depth 별 스타일을 다르게 하고 싶다면 ol > li > ol > li 와 같이 선택자에 따라 다른 표현방식을 적어주면 된다.

 

See the Pen WNrLQQj by zinee (@zineeworld) on CodePen.

https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset

counter-reset

https://developer.mozilla.org/en-US/docs/Web/CSS/counter-increment

counter-increment