今天在做表单生成器的任务卡的时候，想用::before来实现每个字段自动编号的功能，所以查看了一下::before的用法，::before真的是一个很神奇的用法。
参考的这位大神的文章
可以说是讲的非常详细了，我这里就说一下我遇到的一些问题。
这个是我的DOM结构
image
就是每个
div.field的前面加一个序号这是对应的css代码
#header{
text-align: center
}
#header button{
width: 10em;
line-height: 20px;
border-radius: 2px;
border: 1px solid gray;
}
#content {
counter-reset: field 0;
}
.field h1{
counter-increment: field;
}
.field h1::before{
content: counter(field)'.';
}
我的问题就是conter-reset这个属性定义的位置出错了，我原来是定义在.field h1上面的，那么这样其实每个.field h1 都是单独的一个counter，我们要让他们对应同一个counter的话，得把counter定义在父级元素上。
网友评论