Как сделать адаптивную разделительную линию между 2-мя текстами?

Question

[PochemuIKak]

Нужно сделать такую разделительную линию в списке, но чтобы она была адаптивна (когда текст переходит на 2 строку, чтобы линия оставалась). Сейчас делаю ряд флекс контейнером и линии задаю flex:1; но с таким подходом желанного адаптива нет.

Comments

[PochemuIKak]

max-width: min-content; не особо вариант.

Answer 1

[ksnk]

codius.ru/articles/%D0%9A%D0%B0%D0%BA_%D1%81%D0%B2...
Не оно ? если нужно обязательно к левому краю прижимать номера страниц - можно ul.oglavl span.text задать размер в процентах, например.
или https://qna.habr.com/q/391993

Comments

[PochemuIKak]

Оба не подходят. 1-й вообще как-то странно работает, там адаптивом и не пахнет. А во 2-м вместо переноса текста, переносятся сами текстовые блоки друг под друга (в этом случае правый).

[ksnk]

https://jsfiddle.net/9pz801r6/
Вот еще одно решение. Я там добавил первый пункт много раз, чтобы выглядело более реально, но вроде почти так как надо выглядит...

[PochemuIKak]

ksnk, вариант безумно странный, но за то рабочий. Огромное спасибо.

[ksnk]

Вот отсюда взял https://css-tricks.com/a-perfect-table-of-contents.... Там с пояснениями, откуда и что растет. Хотя да, необычно сделано.