CSS 로 증가하는 숫자 만들기

CSS Counter

ol > li 를 나만의 디자인으로 만들고 싶을 경우에 CSS 의 counter 와 before 가상선택자를 이용할 수 있다. ol 과 li 에 아래의 코드를 입력해 활성화 & 사용한다. 같은 방법으로 ol 이 아닌 다른 태그들에도 적용할 수 있다. 임의의 숫자로 지정할 수도 있다.

ol {
 counter-reset: [ 이름 ];
}

ol > li {
 counter-increment: [ 이름 ];
}

ol > li::before {
 content: counter([ 이름 ]);
 /* 기타 스타일링 시작 ... */
}

댓글 달기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

위로 스크롤