jquery - 菜单样式 "...."- 用句点填写

Question

我一直在努力寻找最好的方法来创建“.....”效果，就像晚餐菜单中的那样:http://cl.ly/0g263j04322m3F140D40

不确定是否必须通过自己添加句点来完成，或者是否有办法让 jQuery 或 CSS3 来填充它。只是好奇。

关于我能做什么有什么想法吗？或者回到添加句号的老式方式。

Answer 1

尝试this CSS2 solution .

HTML:

<ul> 
    <li><span>Soup</span><span>€ 2.99</span></li>
    <li><span>Ice cream</span><span>€ 5.99</span></li>
    <li><span>Steak</span><span>€ 20.99</span></li>
</ul>

CSS:

ul {
    width: 400px;
    list-style: none;
}
li {
    border-bottom: 2px dotted black;
    height: 20px;
    margin-bottom: 6px;
}
li span {
    position: relative;
    top: 6px;
    float: left;
    clear: right;
    background: white;
    height: 26px;
}
li span+span {
    float: right;
}