CSS 计数器(counter)入门

参考链接：CSS计数器(counter)入门 – WEB前端开发-专注前端开发，关注用户体验

整个的实例是参照上面的网址之后写的

实例

html

<div class="ruletxt">
                        <p>圣诞节当天“礼从天降”启动时间为：上午10:00—12:00，下午15:30—17:30；</p>
                        <p>圣诞节当天在上述规定时间段登录，点击启动“礼从天降”按钮，即可开始拆礼物；</p>
                        <p>活动当天，每个用户只能参与一次拆礼物；</p>
                        <p>用户拆礼盒所获奖励将及时发送给用户，届时请注意进入“个人中心”查看</p>
                    </div>

less

.ruletxt{
                            counter-reset: mycount;
                            padding:.2rem .2rem 0;
                            p{
                                line-height:.21rem;
                                color:#666;
                                font-size:.12rem;
                                padding-left:.23rem;
                                position:relative
                            }
                            p:before{
                                counter-increment: mycount;
                                content: counter(mycount);
                                position:absolute;
                                left:0;
                                top:.02rem;
                                height:.15rem;
                                width:.15rem;
                                border-radius:50%;
                                text-align:center;
                                line-height:.15rem;
                                background-color:#d31a1f;
                                color:#fff;
                                font-size:.1rem;
                            }

                        }

效果图

image.png