SOURCE

<h2>我们可以使用计数器实现文章的一级二级标题效果</h2>
<div class="box-1">
    <h3>前端开发</h3>
    <h4>JavaScript</h4>
    <p>Prototype</p>
    <p>jQuery</p>
    <p>Backbone.js</p>
    <p>require.js</p>
    <p>vue.js</p>
    <p>react.js</p>
    <p>angular.js</p>
    <h4>CSS</h4>
    <p>css2</p>
    <p>css3</p>
    <p>less</p>
    <p>sass</p>
    <p>stylus</p>
    <h4>HTML</h4>
    <p>HTML 4</p>
    <p>HTML 5</p>
    <h3>后端开发</h3>
    <h4>PHP</h4>
    <p>Laravel</p>
    <p>ThinkPHP</p>
    <p>Yii</p>
    <p>CodeIgniter</p>
    <p>Symfony</p>
    <h4>Java</h4>
    <p>Spring</p>
    <p>JUnit</p>
    <p>Velocity</p>
    <p>Hibernate</p>
</div>

<h2>我们可以设置计数器类型，罗马数字</h2>

<div class="box-2">
    <h4>JavaScript</h4>
    <p>Prototype</p>
    <p>jQuery</p>
    <p>Backbone.js</p>
    <p>require.js</p>
    <p>vue.js</p>
    <p>react.js</p>
    <p>angular.js</p>
</div>

<h2>我们可以设置计数器类型，英语字母</h2>
<div class="box-3">
    <h4>CSS</h4>
    <p>css2</p>
    <p>css3</p>
    <p>less</p>
    <p>sass</p>
    <p>stylus</p>
</div>


<h2>我们可以设置计数器类型，希腊数字</h2>
<div class="box-4">
    <h4>PHP</h4>
    <p>Laravel</p>
    <p>ThinkPHP</p>
    <p>Yii</p>
    <p>CodeIgniter</p>
    <p>Symfony</p>
</div>

.box-1 {
  /* Set "subsection" to 0 */
  counter-set: Title_1 0;
}

.box-1 h3::before {
  counter-increment: Title_1;
  content: "方向 " counter(Title_1) ": ";
}
.box-1 h3{
    counter-set: Title_2 0;
}
.box-1 h4::before{
    counter-increment: Title_2;
    content: "语言 " counter(Title_1) "." counter(Title_2) ": ";
}
.box-1 h4{
    counter-set: Title_3 0;
}

.box-1 p::before {
  counter-increment: Title_3;
  content: "框架： " counter(Title_1) "." counter(Title_2) "." counter(Title_3) " ";
}

.box-2{
    counter-set: romanNumber;
}
.box-2 p::before{
    counter-increment: romanNumber;
    content: counter(romanNumber, upper-roman) ". ";
}

.box-3{
    counter-set: circleNumber;
}
.box-3 p::before{
    counter-increment: circleNumber;
    content: counter(circleNumber, lower-alpha) ". ";
}

.box-4{
    counter-set: lowerGreekNumber;
}
.box-4 p::before{
    counter-increment: lowerGreekNumber;
    content: counter(lowerGreekNumber, lower-greek) ". ";
}