通常我们用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>
效果如下:
