css로 가상클래스에 index 번호넣기

순서형식의 리스트 UI를 잡을때 기본 ol태그의 숫자는 스타일을 바꾸는게 제한적이라

js로만 index값을 찾아서 넣어줄 수 있는줄 알았는데

구지 자바스크립트를 쓰지않고 css로 번호를 순서대로 삽입할수있다는걸 처음 알게되었다 -ㅁ-

 

너무 간단해서 충격...이렇게하면 스타일로 마음대로 넣을수 있고...

왜 그동안 스크립트로만 써왔던것인가...무지했던 나의 과거를 반성하며

 

html

<ol>
    <li>내가 첫번째</li>
    <li>내가 두번째</li>
    <li>내가 세번째</li>
</ol>

css

ol {counter-reset: number 0;}
ol li:before {counter-increment: number 1;content: counter(number);}

 

끝