实现方法如下:
p { counter-reset: num; /*将p元素中的计数器重置为0*/ } p::before { counter-increment: num; /*将计数器加1,实现数字增加*/ content: counter(num) "."; /*在before伪元素中显示计数器值,后跟句点*/ margin-right: 0.5em; /*调整数字与文本之间的距离*/ }
可以通过修改content属性的值来改变显示形式,例如修改为“ counter(num) “、counter(num) “)”等等。
值得注意的是,在使用css数字后加圆时,需要将其应用于编号或列表元素中,以达到最佳效果。