使用CSS3自动实现文章标题级别（自动目录

Counter index classes. 学习CSS3 counter系列方法和属性（counter-increment）的使用。

css3，教程

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3168
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.counter {
    counter-reset: index-1;
}
.counter-index-1 {
    counter-increment: index-1;
    counter-reset: index-2;
}
.counter-index-1::before {
    content: counter(index-1)'.';
}
.counter-index-2 {
    counter-increment: index-2;
    counter-reset: index-3;
}
.counter-index-2::before {
    content: counter(index-1)'.'counter(index-2)'.';
}
.counter-index-3 {
    counter-increment: index-3;
    counter-reset: index-4;
}
.counter-index-3::before {
    content: counter(index-1)'.'counter(index-2)'.'counter(index-3)'.';
}
.counter-index-4 {
    counter-increment: index-4;
    counter-reset: index-5;
}
.counter-index-4::before {
    content: counter(index-1)'.'counter(index-2)'.'counter(index-3)'.'counter(index-4)'.';
}
.counter-index-5 {
    counter-increment: index-5;
    counter-reset: index-6;
}
.counter-index-5::before {
    content: counter(index-1)'.'counter(index-2)'.'counter(index-3)'.'counter(index-4)'.'counter(index-5)'.';
}
.counter-index-6 {
    counter-increment: index-6;
    counter-reset: index-7;
}
.counter-index-6::before {
    content: counter(index-1)'.'counter(index-2)'.'counter(index-3)'.'counter(index-4)'.'counter(index-5)'.'counter(index-6)'.';
}
.counter-index-1,
.counter-index-2,
.counter-index-3,
.counter-index-4,
.counter-index-5,
.counter-index-6 {
    position: relative;
}
.counter-index-1::before,
.counter-index-2::before,
.counter-index-3::before,
.counter-index-4::before,
.counter-index-5::before,
.counter-index-6::before {
    margin-right: .5em;
    position: absolute;
    right: 100%;
}
html {
    font-family: sans-serif;
    color: #111;
}
.counter {
    max-width: 400px;
    margin: auto;
    padding: 40px 70px;
}
.counter-index-1 {
    color: #2b2b2b;
}
.counter-index-2 {
    color: #444444;
}
.counter-index-3 {
    color: #5e5e5e;
}
.counter-index-4 {
    color: #777777;
}
.counter-index-5 {
    color: #919191;
}
.counter-index-6 {
    color: #aaaaaa;
}
p {
    font-size: .9rem;
    line-height: 1.4;
}
code {
    background: #eee;
}

HTML

Counter index classes. 学习CSS3 counter系列方法和属性（counter-increment）的使用。

css3，教程

编辑器支持Emmet

快捷键

Counter index classes. 学习CSS3 counter系列方法和属性（counter-increment）的使用。

css3，教程

使用CSS3裁剪路径（clip-path）属性实现燕尾形状的文本

CSS3基线 辅助设计排版网格

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

CSS3基线辅助设计排版网格