<ol>
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ol>
<ol class="list-zero">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ol>
<ol class="list-roman">
<li>내용1</li>
<li>내용2</li>
<li>내용3</li>
</ol>
ol {
/* section이라는 이름의 카운터를 세팅 */
counter-reset: section;
}
ol li {
list-style: none;
}
ol li::before {
/* 세팅한 카운터를 사용할 요소에 counter-increment를 이용하여 값을 1씩 증가 */
counter-increment: section;
/* 해당 카운터 값을 표시 */
content: "Section " counter(section) ": ";
}
ol.list-zero li::before {
content: "Section " counter(section,decimal-leading-zero) ": ";
}
ol.list-roman li::before {
content: "Section " counter(section,lower-roman) ": ";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.