HTML-通过before和css计数器实现标题

256 阅读1分钟
通常我们用ul、li来实现有序的列表,下面介绍另外一种方式:
:before伪类可以给元素前面插入内容,同时再配合计数器就可以实现,代码如下:

css样式:

<style>
        body{
            /*定义计数变量,可以初始化也可以不初始化(默认为0)*/
            counter-reset: titleCount;
        }

        p:before{
            content: counter(titleCount) '.';
            counter-increment: titleCount;
        }
</style>

html代码:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut corporis dignissimos ducimus eius esse harum illo modi nisi obcaecati officiis placeat possimus quasi rem, repudiandae suscipit tempora voluptate voluptatum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut corporis dignissimos ducimus eius esse harum illo modi nisi obcaecati officiis placeat possimus quasi rem, repudiandae suscipit tempora voluptate voluptatum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut corporis dignissimos ducimus eius esse harum illo modi nisi obcaecati officiis placeat possimus quasi rem, repudiandae suscipit tempora voluptate voluptatum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut corporis dignissimos ducimus eius esse harum illo modi nisi obcaecati officiis placeat possimus quasi rem, repudiandae suscipit tempora voluptate voluptatum!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda aut corporis dignissimos ducimus eius esse harum illo modi nisi obcaecati officiis placeat possimus quasi rem, repudiandae suscipit tempora voluptate voluptatum!</p>

效果如下: