テキストとテキストの間に線を引きたい

Question

上記画像のようにテキストとテキストの間に伸縮する線を引きたいです。
レスポンシブに対応させたいので、左右のテキストは折れずに、線が短くなっていくイメージなのですがコーディングのイメージがついていません。。。
ご教授お願い致します。

Comments

[m.ts10806]

まずは自身が思うようにやってみてください。
分からないなりに調べたり試したことがあるはずです。

[miyabi_pudding]

グレーの波線を伸縮させたいということでしょうか？

[Peeetaro]

グレーの波線を伸縮させたいです

[miyabi_pudding]

わかりました。
調査をされたなら、調査をした時のキーワード、参考にした記事のURLの記載、
また、記事を参考にした上で、自分で書いてみたコードを記載することを勧めます。
そこまでいって、丸投げな印象は無くなるかと。
今のままだと、自身で考えることを放棄して、人に作業依頼をしてしまっている質問状態です。
どうか、上記の記載の実践をお願いします。

[Peeetaro]

わかりました。
ありがとうございます。

[cwi]

本の目次によくあるデザインですね。目次やtableofcontentsの語を含めて各種検索語で検索／画像検索してもいくつか見つかります。例：https://markentier.tech/posts/2021/03/responsive-toc-leader-lines-with-css/

Answer 1

色々調べた結果、tableと擬似要素の組み合わせでイメージしていた動きの実装ができました。