html如何在网页添加虚线,html – 用CSS添加虚线spacer / infill

我正在一家餐馆网站上工作.该设计要求在菜单项和价格之间填充典型的虚线.我一直在网上搜索并乱了一个小时左右,现在似乎没有找到任何好方法只用CSS做到这一点.如果你有一个纯色背景,我在这里发现了其他几个解决方案,但是在这个网站上它使用背景图像并且这些解决方案不起作用.

示例：Menu style “….” – fill in with periods有一个很好的解决方案,但它将菜单项和价格的背景颜色设置为白色以隐藏它们后面的虚线,但我正在构建的页面有一个背景图像,因此任何纯色背景看起来都很糟糕.

我已尝试在元素上使用表行/表格单元格或任何其他类型的CSS显示属性和宽度设置的各种组合,但没有骰子.

这是一些假的样本标记：

• Soup $2.99
• Ice cream $5.99
• Steak $20.99

我一直试图通过使用带有底部边框的“dots”类元素来填补空白,但我尝试的任何工作都没有.我也只是在每行底部的LI元素上放置一个底部边框,但这不是设计师想要的.作为最后的手段,我只能想到在javascript中这样做,但想知道你们是否有任何想法.或者,我可以使用表格,但我也想避免这样做.

谢谢！