How to add a specific amount of periods to list item?

Question

I'm making a menu for that currently looks like this...

When what I want is to add periods between the name and the price depending on the space between them like this

As you can see, the periods don't go all the way to the the item's name. How would I connect them together??

This is my HTML:

<li>
  <div>
    <span>Number</span><h4>Name</h4>
  </div>
    <h4>Price</h4>
</li>

It looks like "css dot leader" yields some useful web search results. (It took some digging before I found a search term I was satisfied with.) — alexanderbird, Jul 03 '21 at 03:20
Could you add your CSS - in particular, how are you positioning the price? — A Haworth, Jul 03 '21 at 03:25
from the duplicate: https://stackoverflow.com/a/52711235/8620333 — Temani Afif, Jul 03 '21 at 08:39
@AHaworth Haworth I'm using Bootstrap. It's a span aligned to the end. — Dominyc Turner, Jul 04 '21 at 07:12

score -1 · Answer 1 · answered Jul 03 '21 at 02:55

you need to make a css rule like this:

.your-dots-parent::before{
  content: '. . . . . . . . . . . . . . . . . . . . . . . . .";
  /* center it however it fits */
}

Use · · for a dot or • • for a thicker one

1 Answers1