使用::before和::after伪元素自动生成列表序号

1.关键点在于使用 counter() 计数器属性，调用计数器，可以不使用列表元素实现序号功能。

2. 同时需要配合 counter-increment和 counter-reset属性使用

代码如下

dl{
   counter-reset: section;
}
dt{
  counter-reset: subsection;
}
 dt {
        &::before {
            counter-increment: section;
            content: "第"counter(section)"章";
        }
    }

    dd {
        &::before {
            counter-increment: subsection;
            content: "第"counter(section)"章第"counter(subsection)"节";
        }
    }

<div class="sideBar" id="sideBar">
        <div id="sideBarTab">
            <h2>INDEX</h2>
        </div>
        <div id="sideBarContents">
            <dl>
                <dt name="0">What Is Copy Cloud Storage?</dt>
                <dt name="1">Why Need to Copy Cloud Files?</dt>
                <dt name="2">How to Copy Cloud Drive Storage?</dt>
                    <dd name="3">Copy within the Same Cloud</dd>
                    <dd name="4">Copy from One Cloud to Another</dd>
                <dt name="5">Summary and Verdict</dt>
            </dl>
        </div>
    </div>

效果如下：

更多详情可以参考这里Using CSS counters