Построение на @ Nico O ‘s ответ , нет необходимости в несемантическом элементе .dots.
.toc li {
display: flex;
}
.toc li .title {
order: 1;
}
.toc li .chapter {
order: 3;
}
.toc li::after {
content: "";
border-bottom: 1px dotted;
flex-grow: 1;
order: 2;
}
<ul class="toc">
<li>
<span class="title">Foo</span>
<span class="chapter">Chapter 1</span>
</li>
<li>
<span class="title">Bar</span>
<span class="chapter">Chapter 2</span>
</li>
</ul>
Мы пользуемся тем фактом, что мы можем упорядочить дочерние элементы нашего гибкого контейнера так, как хотим, и тем фактом, что псевдоэлемент ведет себя как дочерний элемент того, где он был определен. Ключ - правило flex-grow. flex-grow из 1, в то время как для всех остальных братьев и сестер по умолчанию 0 увеличится до оставшегося пространства, даже если у него нет содержимого.
Это будет работать до тех пор, пока элементы .title и .chapter вместе не заполнят все пространство. Тогда псевдоэлемент ::after будет иметь width, равный 0, и пунктирная граница не будет отображаться, даже если .title и .chapter будут переносить их содержимое. Поэтому, если вы уверены, что этого не произойдет, и ваши зрители используют современных браузеров , это может быть оптимальным решением.
Если вы хотите более разреженные точки, вы можете использовать радиальный градиент в качестве фона для псевдоэлемента вместо border-bottom:
.toc li::after {
background-image: radial-gradient(circle, currentcolor 1px, transparent 1px);
background-position-y: bottom;
background-size: 1ex 3px;
background-repeat: repeat-x;
height: 1em;
}