Question:

There is a text: conditional schedule. For example:

• Mon-Sat …….. 8
• 19 Sun ……… Closed

Using css and/or js, you need to make sure that the points are located between the text, and they should not be default (round), but square, of a certain color (not text color), size and with a certain indent between them. At the same time, this design should be adaptive, i.e. when narrowing, the number of points should change so that the text on the right side remains on the same line.

I'm not asking you to write code for me, I'm only asking for advice on which way to dig. While there is such an idea: make a wrapper and cram text around the edges there, using floats, and between push some block and use the background and its repeat to fill with dots. But how to make it always the desired width is not clear.

I'm asking here because I'm sure that this problem is trivial and probably already has a beautiful solution.

Answer:

Just 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;
}

<section>
  <div>123</div>
  <div>456</div>
</section>

With adjustable distances:

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;
}

<section>
  <div>123</div>
  <div>456</div>
</section>