<!--<div class="table_container">
  <div class="table_title">目次</div>
  <a href="#" class="table_link_big">テキストダミーテキストダミーテキストダミーテキストダミーテキスト</a>
  <a href="#" class="table_link_small">ダミーテキストダミーテキストダミーテキスト</a>
  <a href="#" class="table_link_big">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</a>
  <a href="#" class="table_link_small">ダミーテキストダミーテキストダミーテキスト</a>
  <a href="#" class="table_link_big">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</a>
  <a href="#" class="table_link_small">ダミーテキストダミーテキストダミーテキスト</a>
  <a href="#" class="table_link_big">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</a>
  <a href="#" class="table_link_small">ダミーテキストダミーテキストダミーテキスト</a>
</div>-->

<div class="content">
  <section class="section" id="section01">
    <h1 class="head_big">大見出し</h1>
    
    <div class="section_inner" id="section_inner1-1">
      <h2 class="head_small">小見出し</h2>
    </div>
       <div class="section_inner" id="section_inner1-2">
      <h2 class="head_small">小見出し</h2>
    </div>
  </section>
  
  <section class="section" id="section02">
    <h1 class="head_big">大見出し</h1>
    
    <div class="section_inner" id="section_inner2-1">
      <h2 class="head_small">小見出し</h2>
    </div>
    <div class="section_inner" id="section_inner2-2">
      <h2 class="head_small">小見出し</h2>
    </div>
    <div class="section_inner" id="section_inner2-3">
      <h2 class="head_small">小見出し</h2>
    </div>
  </section>
  <section class="section" id="section03">
    <h1 class="head_big">大見出し</h1>
    
    <div class="section_inner" id="section_inner3-1">
      <h2 class="head_small">小見出し</h2>
    </div>
    <div class="section_inner" id="section_inner3-2">
      <h2 class="head_small">小見出し</h2>
    </div>
    <div class="section_inner" id="section_inner3-3">
      <h2 class="head_small">小見出し</h2>
    </div>
    <div class="section_inner" id="section_inner3-4">
      <h2 class="head_small">小見出し</h2>
    </div>
  </section>
</div>
.table_container{
  box-sizing: border-box;
  border: 2px solid #000;
  margin: 0 auto;
  padding: 30px;
  width: 80%;
}

.table_title{
  font-size: 20px;
  font-weight: bold;
}

.table_link_big{
  color: #000;
  display: block;
  font-size: 16px;
  margin-top: 30px;
  text-decoration: none;
}

.table_link_small{
  color: #000;
  display: block;
  font-size: 14px;
  margin-top: 15px;
  margin-left: 10px;
  text-decoration: none;
}

.content{
  margin: 120px auto;
  width: 80%;
}

.head_big{
  background-color: #e6e6e6;
  border-radius: 5px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  margin-top: 100px;
  padding: 25px 15px;
}

.head_small{
  font-size: 20px;
  font-weight: bold;
  line-height: 1.75;
  margin-top: 50px;
  padding: 15px 0px 15px 23px;
  position: relative;
}

.head_small::before{
  background-color: #e6e6e6;
  border-radius: 5px;
  content: "";
  display: block;
  width: 8px;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
}
  // 目次を生成
  let table_of_contents = '<div class="table_container">\n'
  +'<div class="table_title">目次</div>\n';

  for(let big=1; big <= $('.section').length; big++){
    
    let head_l = $('#section0' + big).find('.head_big').text();
    
    table_of_contents += '<a href="#section0' + big + '" class="table_link_big">' + big + '.' + head_l + '</a>\n';

    
    for(let small=1; small <= $('#section0' + big).find('.head_small').length; small++){
      
      let head_s = $('#section0' + big).find('#section_inner' + big + '-' + small).find('.head_small').text();
      
      table_of_contents += '<a href="#section_inner' + big + '-' + small + '" class="table_link_small">ー' + head_s + '</a>\n';
      
    }
    
    
  }

  table_of_contents += '</div>';

  $('.content').before(table_of_contents);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.6.0.min.js