Agregar un espaciador de línea de puntos / relleno con CSS
Estoy trabajando en un sitio web de restaurante. El diseño requiere el típico relleno de línea de puntos entre un elemento del menú y el precio. He estado recorriendo la red y jugando con ella durante una hora más o menos y parece que no puedo encontrar ninguna buena manera de hacer esto solo con CSS. Encontré un par de otras soluciones aquí que funcionan muy bien si tienes un fondo de color sólido, sin embargo, en este sitio usa una imagen de fondo y esas soluciones no funcionan.
Ejemplo:Estilo de menú "...." - rellenar con puntos tiene una buena solución, pero establece los colores de fondo en blanco del elemento del menú y el precio para ocultar las líneas de puntos detrás de ellos, pero la página que estoy construyendo tiene una imagen de fondo para que cualquier fondo de color sólido se vea mal.
He intentado usar todo tipo de combinaciones de tabla-fila / tabla-celda o cualquier otro tipo de atributos de visualización de CSS y configuración de ancho en los elementos, pero no dados.
Aquí hay un ejemplo de marca falsa:
<ul>
<li><span>Soup</span><span class="dots"> </span><span>$2.99</span></li>
<li><span>Ice cream</span><span class="dots"> </span><span>$5.99</span></li>
<li><span>Steak</span><span class="dots"> </span><span>$20.99</span></li>
</ul>
He estado tratando de hacer que esto funcione mediante el uso del elemento de clase "puntos" con un borde inferior para llenar el espacio, pero nada de lo que intento funciona. También acabo de poner un borde inferior en el elemento LI a lo largo de la parte inferior de cada fila, pero eso no es lo que quiere el diseñador. Solo puedo pensar en hacerlo en javascript como último recurso, pero quería ver si tenían alguna idea. O, simplemente puedo usar tablas, pero realmente quería evitar eso también.
¡Gracias!