CSS计数器counters的string参数与嵌套

HTML

<div class="reset">
    <div class="counter">我是王小二
        <div class="reset">
            <div class="counter">我是王小二的大儿子</div>
            <div class="counter">我是王小二的二儿子
                <div class="reset">
                    <div class="counter">我是王小二的二儿子的大孙子</div>
                    <div class="counter">我是王小二的二儿子的二孙子</div>
                    <div class="counter">我是王小二的二儿子的小孙子</div>
                </div>
            </div>
            <div class="counter">我是王小二的三儿子</div>
        </div>
    </div>
    <div class="counter">我是王小三</div>
    <div class="counter">我是王小四
        <div class="reset">
            <div class="counter">我是王小四的大儿子</div>
        </div>
    </div>
</div>
					    

CSS

.reset {
    padding-left: 20px;
    counter-reset: wangxiaoer;
}
.counter:before {
    content: counters(wangxiaoer, '-') '. ';
    counter-increment: wangxiaoer;
}
.demo .counter {
    width: 300px;
    margin: auto;
    text-align: left;
}
				    

JS

//no