dd,dtを使ったフロー（タイムライン風）について

Question

前提・実現したいこと
１、CSSでdd,dtを作ったのですが、中心にあるフローの最後を飛び出ないようにしたい（添付画像赤い部分）
２、01から04まで順番に番号を振りたく、contentを使用たが効かない

該当のソースコード

<dl class="table_flexbox">
  <dt class="table_flexbx_left museum_flexbox_left">見積もり</dt>
  <dd class="table_flexbox_right museum_flexbox_right">
    <span class="table_bold table_bold_pink">見積もり</span><br>
    <p class="flexbox_txt_normal">ああああ</p>
  </dd>                
</dl> 

<dl class="table_flexbox">
  <dt class="table_flexbx_left museum_flexbox_left">見積もり</dt>
  <dd class="table_flexbox_right museum_flexbox_right">
    <span class="table_bold table_bold_pink">見積もり</span><br>
    <p class="flexbox_txt_normal">ああああ</p>
  </dd>                
</dl>

<dl class="table_flexbox">
  <dt class="table_flexbx_left museum_flexbox_left">見積もり</dt>
  <dd class="table_flexbox_right museum_flexbox_right">
    <span class="table_bold table_bold_pink">見積もり</span><br>
    <p class="flexbox_txt_normal">ああああ</p>
  </dd>                
</dl> 
	
<dl class="table_flexbox">
  <dt class="table_flexbx_left museum_flexbox_left">見積もり</dt>
  <dd class="table_flexbox_right museum_flexbox_right">
    <span class="table_bold table_bold_pink">見積もり</span><br>
    <p class="flexbox_txt_normal">ああああ</p>
  </dd>                
</dl> 			

			
	

.table_flexbox {
　display: flex;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-style: normal;
  font-weight: 400;
}


.table_flexbox_left {
　text-align: right;
　width: 50%;
　font-size: 22px;
  color: #000;
  font-weight: 600;
　padding-top: 45px;
  padding-right: 50px;
	
}
.table_flexbox_right {
　width: 50%;
  font-size: 20px;
  color: #000;
  border-left: 2px solid #000;
  padding-top: 38px;
　position: relative;
  padding-left: 80px;
　text-align: left;
　line-height: 1.8;
  counter-reset: number; 
}


.table_bold {
　color: #000;
  font-size: 22px;
　font-weight: bold;
　display: inline-block;
  line-height: 2.6;
}


.table_bold::before {
  counter-increment: num 1;
  content: counter(num,decimal-leading-zero);
  font-family: roboto,sans-serif;
  font-size: 18px;
  display: block;
  width: 20px;
  height: 20px;
  padding: 4px 4px;
  border-radius: 6px;
  border: 2px solid #000;
  background: #fff;
  position: absolute;
  top: 50px;
  left: -17px;
  line-height: 1.2;

}

試したこと
飛び出た部分をなくすため、.table_flexbox_rightのborder-leftを長さを変化させようと思ったのですが、うまい具合の長さにならず、また、中心線がどんどんずれてしまいました。
また、数字を順番にカウントしていく方法はこれ以外に探し出せず、実装が間違っているのかも探せなかったため、アドバイスをいただきたいです…！

補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。

Answer 1

まず、HTMLでdlのフロー全体をdivで囲んでおきます。

<div class="wrapper">
  <dl class="table_flexbox">
    略
  </dl>
  <dl class="table_flexbox">
    略
  </dl>
  ・
  ・
  ・
</div>

直線部分は、現状のddのborder-leftでは位置調整が難しいので、疑似要素のborder-leftで表示させます。最後の直線は、:not(:last-child) で適用を除外させます。

.table_flexbox_right {
　width: 50%;
  font-size: 20px;
  color: #000;
/*  border-left: 2px solid #000; 削除 */
  padding-top: 38px;
　position: relative;
  padding-left: 80px;
　text-align: left;
　line-height: 1.8;
  counter-reset: number; 
}
/* 以下追加 */
.table_flexbox:not(:last-child) .table_flexbox_right::before {
  content: "";
  display: block;
  position:absolute;
  top: 50px;
  left: 0;
  height: 100%;
  border-left: 2px solid #000;
}

カウンターは全体の親要素でリセットさせれば連番になります。下記のCSSを追加してください。

.wrapper {
  counter-reset: num;
}

Comments

[shiro555]

いつもご回答ありがとうございますT T！！
数字部分について.table_bold::beforeの実装は私の書いたコードのままでしょうか？
上記のように入れたら、ブロックのつながりのようなものが連なっている状態になってしまいました。。

[shiro555]

すみません、解決いたしました！！

.table_flexbox_right::beforeと元々の.table_bold::beforeが同じ場所にあるクラス名だったので、
擬似要素同士が被っておりました。

お答えいただき本当にありがとうございます！！