[CSS] Headings 자동 넘버링

HTML <h> 태그 자동넘버링글 구현한 예제입니다.

 

HTML

<h1>제목</h1>
<h2>부제목</h2>
<h3>소제목</h3>
<h3>소제목</h3>
<h3>소제목</h3>
<h2>부제목</h2>
<h3>소제목</h3>
<h3>소제목</h3>
<h3>소제목</h3>

 

CSS

body {
	counter-reset: h2counter;
}
h1 {
	counter-reset: h2counter;
}
 
h2 {
	counter-reset: h3counter;
}
 
h2:before {
	content: counter(h2counter) ".\0000a0";
	counter-increment: h2counter;
	counter-reset: h3counter;
	color: red;
}
 
h2.nocount:before {
	content: none;
	counter-increment: none;
}
 
h3:before {
	content: "\0000a0\0000a0" counter(h2counter) "." counter(h3counter) ".\0000a0";
	counter-increment: h3counter;
	color: red;
}
 
h3.nocount:before {
	content: none;
	counter-increment: none;
}

---

참고

https://2ality.com/2012/01/numbering-headingshtml.html