<div class="toc">
<ol>
<li>目次</li>
<li>目次
<ol>
<li>目次</li>
<li>目次</li>
<li>目次
<ol>
<li>目次</li>
<li>目次</li>
<li>目次</li>
<li>目次</li>
<li>目次</li>
</ol>
</li>
<li>目次</li>
</ol>
</li>
<li>目次</li>
<li>目次</li>
</ol>
</div>
.toc ol {
/* カウンターのリセット */
counter-reset: section;
/* デフォルトのリストスタイルを削除 */
list-style-type: none;
/* 左の余白を調整 */
padding-left: 1.5em;
}
.toc li {
/* 各項目の余白調整 */
margin: 0.5em 0;
}
.toc li::before {
/* カウンターの増加 */
counter-increment: section;
/* カウンターの表示 */
content: counters(section, ".") " ";
/* 番号と内容の間隔調整 */
margin-right: 0.5em;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.