纯 css 实现段落标题自动编号

0 Comment

我们写文档通常会把内容分成若干个段落,每个段落都有一个标题,按级别分别使用 h1/h2/h3 标签。为了理清段落之间关系,我们会给各个标题前加上编号。

比如:

<h1>1. 编程语言</h1>
……
<h2>1.1 C++</h2>
<h2>1.2 Python</h2>

手动维护编号很粗暴很累人,如果位置靠前的某个段落被删除,那么几乎每个段落编号都要手动修改一次。而使用 css 来实现自动编号,就可以避免这个麻烦。

css 中 counter-reset 可以创建一个计数器;counter-increment 可以自动将计数器加1。然后,只需要用 counter 获取计数器值,把它填写在 content 中即可。

实现代码:

body {
counter-reset: chapter;
}

h1 {
counter-reset: section;
}
h1:before {
counter-increment: chapter;
content: counter(chapter) ". ";
}

h2 {
counter-reset: subsection;
}
h2:before {
counter-increment: section;
content: counter(chapter) "." counter(section) " ";
}

h3:before {
counter-increment: subsection;
content: counter(chapter) "." counter(section) "." counter(subsection) " ";
}

原文:大象的博客 - 使用 css 实现自动计算段落编号

声明:除非注明,常阳时光文章均为原创
本文地址:https://cyhour.com/797/
转载时必须以链接形式注明原始出处。
Views: 207 Tags:  , 

Comments:0

发表留言

炒蛋:Vultr 送$25 | 搬瓦工年付$19补货,优惠码 BWH26FXH3HIQ | 推荐VPS信息