Adicionando um espaçador de linhas pontilhadas / preenchimento com CSS
Eu estou trabalhando em um site de restaurante. O design exige o preenchimento típico de linha pontilhada entre um item de menu e o preço. Eu tenho vasculhado a rede e mexido com ela por uma hora ou mais agora e não consigo encontrar nenhuma boa maneira de fazer isso com apenas CSS. Eu encontrei um par de outras soluções aqui que funcionam muito bem se você tem um fundo de cor sólida, no entanto, neste site, ele usa uma imagem de fundo e essas soluções não funcionariam.
Exemplo:Estilo de menu "...." - preencha com períodos tem uma boa solução, mas define as cores de fundo para branco do item de menu e preço para ocultar as linhas pontilhadas por trás delas, mas a página que estou construindo tem uma imagem de plano de fundo para que qualquer fundo de cor sólida fique ruim.
Eu tentei usar todos os tipos de combinações de table-row / table-cell ou qualquer outro tipo de atributos de exibição CSS e configurações de largura nos elementos, mas nenhum dado.
Aqui está uma marcação de amostra 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>
Eu tenho tentado fazer isso funcionar usando o elemento de classe "pontos" com uma borda inferior para preencher a lacuna, mas nada que eu tente funciona. Eu também coloquei uma borda inferior no elemento LI até o final de cada linha, mas não é isso que o designer quer. Eu só posso pensar em fazê-lo em javascript como último recurso, mas queria ver se vocês tinham alguma idéia. Ou posso usar apenas tabelas, mas realmente queria evitar isso também.
Obrigado!