How do I fill the space between items with dots?

Issue

I'm trying to have the space between the item and the price automatically fill with "..."

/* css missing */

<ol>
  <li><span class="item">Toast</span><span class="price">$1.55</span></li>
  <li><span class="item">Eggs</span><span class="price">$2.12</span></li>
  <li><span class="item">Bacon</span><span class="price">$3.25</span></li>
  <li><span class="item">Short stack</span><span class="price">$4.00</span></li>
</ol>

I already have css separating the elements via float, but I'm not sure how I would add the dots in between. Any ideas here? I was thinking maybe a border-bottom, but don't know how to make it only between the item and the price.

Solution

In case you want to stay classy and keep the prices lined up! Flexbox & some repeating linear gradients for more customization on the dotted part.

ol {
  width: 200px;
}

li {
  display: flex;
  width: 100%;
}

.price {
  flex-grow: 1;
  text-align: right;
  display: flex;
}

.price::before {
  content:'';
  background: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 2px, transparent 4px);
  height: 1px;
  flex-grow: 1;
  display: inline-block;
  margin-top: 1em;
}

<ol>
  <li><span class="item">Toast</span><span class="price">$1.55</span></li>
  <li><span class="item">Eggs</span><span class="price">$2.12</span></li>
  <li><span class="item">Bacon</span><span class="price">$3.25</span></li>
  <li><span class="item">Short stack</span><span class="price">$4.00</span></li>
</ol>

Answered By - kthornbloom