css – 在菜单描述后添加虚线轨迹

我如何在CSS中的餐厅菜单中添加动态“……….”？就像在印刷品中一样,他们拥有整体
“我们的食物是用等等等等…………… $24.99.”

你会如何在CSS中做到这一点？或者这甚至可能吗？

解决方法

最好的解决方案是：

<ul>
    <li><p class="food">Chinese Food</p><p class="price">$5.99</p></li>
</ul>

然后CSS匹配(未经测试,但可调整以获得效果)

li {
    width: 300px;
    height: 20px;
    border-bottom: 1px dotted black;
    background-color: white;
}

.food,.price {
    height: 22px; //key: just a bit taller than the LI
    background-color: white;
}

.food {
    float: left;
}

.price {
    float: right;
}

所以它基本上修复了LI的矩形并在底部绘制了一个边框,然后价格和食物名称用它们的宽度动态地覆盖它. YMMV与浏览器,但可能是负边距底部将得到li边框底部被P元素肯定遮盖.