Как сделать отступы в виде точек между текстом

Есть текст: условное расписание. К примеру:
Пн-Сб ........ 8 19 Вс .......... Выходной
Нужно с помощью css и/или js сделать так, чтобы точки располагались между текстом, причём они не должны быть дефолтными (круглыми), а квадратными, определённого цвета(не цвета текста), размера и с определённым отступом между собой. При это при всём эта конструкция должна быть адаптивной, т.е. при сужении кол-во точек должно изменяться так, чтобы текст в правой части оставался на одной линии.
Я не прошу писать за меня код, я прошу лишь дать совет, в какую сторону копать. Пока есть вот такая мысль: сделать обёртку и запихать туда текст по краям, с помощью float'ов, а между затолкать какой-то блок и с помощью фона и его repeat'а заполнить точками. Но как сделать его всегда нужной ширины не понятно.
Спрашиваю тут потому, что уверен, что эта задача тривиальная и уже наверняка имеет красивое решение.

Ответ

Просто dotted:
div:first-child { float: left; } div:last-child { float: right; } section { overflow: hidden; } section:after { content: "\A0"; display: block; overflow: hidden; border-bottom: 3px dotted red; margin-top: -6px; } div:first-child:after, div:last-child:before { content: ""; display: inline-block; width: .25em; }

123

456

С регулируемыми расстояниями:
div:first-child { float: left; } div:last-child { float: right; } section { overflow: hidden; line-height: 1.2em; } section:after { content: ""; display: block; overflow: hidden; padding-top: 1em; height: 3px; box-sizing: content-box; background: repeating-linear-gradient(to right, red, red 3px, transparent 3px, transparent 9px); background-clip: content-box; } div:first-child:after, div:last-child:before { content: ""; display: inline-block; width: .5em; }

123

456