downgoon/header-counter-demo.html

## header-counter-demo.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width initial-scale=1" />
  <title>标题自动编号</title>
  <style type="text/css">

    h1 {
      counter-increment: countH1;
    }

    h2 {
     counter-increment: countH2;
     counter-reset: countH3;
    }

    h3 {
        counter-increment: countH3;
    }

    h1::before {
        content: "";
        margin-left: 1em;
        margin-right: 1em;
    }

    h2::before {
        content: counter(countH2);
        margin-left: 2em;
        margin-right: 2em;
        display: block;  /* 标题编号换行 */
        color: rgb(73, 200, 149); /* 标题编号上色 */
    }

    h2 {
      margin-top: 20px; /* 上侧外边距 */
      border-top: 10px solid rgb(73, 200, 149); /* 上侧边框，实现彩带 */
      padding-top: 40px; /* 上侧内边距 */
    }

    h3::before {
      content: counter(countH2)"."counter(countH3)"";
      margin-left: 3em;
      margin-right: 3em;
    }

  </style>
 </head>
 <body>
  <h1>一级标题</h1>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <p>正文内容 Content </p>
  <h3>三级标题</h3>
  <p>正文内容 Content </p>
  <h2>二级标题</h2>
  <h3>三级标题</h3>
  <p>正文内容 Content </p>
 </body>
</html>