CSS 计数器 为列表添加序号

04月/07日/CSS教程/浏览 353

在长文中,经常需要为章节、段落加上序号。一般的是使用 ol 标签。

其实,css 本身就提供计数功能,可以更灵活的添加序号。


<!DOCTYPE html>
<html>
<head>
<style>
body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "第" counter(section) "章: ";
}
</style>
</head>
<body>

<h1>CSS 计数器:</h1>
<h2>WordPress</h2>
<h2>小程序</h2>
<h2>PHP</h2>
<h2>CSS</h2>
</body>
</html>


其结果如下:



counter-reset - 创建或重置计数器

counter-increment - 递增计数器值

content - 插入生成的内容

counter() 或 counters() 函数 - 将计数器的值添加到元素

css

发表评论

暂无评论,抢个沙发...

客服 工单