Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS Bin</title>
    </head>
    <body>
​
​
        <ul class=leaders>
            <li>
                <span>Salmon Ravioli</span>
                <span>7.95</span>
            </li>
            <li>
                <span>Pan seared Ahi with avocado, soy, ginger and lime</span>
                <span>8.95</span>
            </li>
            <li>
                <span>Almond Prawn Cocktail</span>
                <span>7.95</span>
            </li>
            <li>
                <span>Bruschetta</span>
                <span>45.25</span>
            </li>
            <li>
                <span>Margherita Pizza</span>
                <span>108.95</span>
            </li>
        </ul>
​
​
​
​
    </body>
</html>
 
body{background:orange;}    /* No other backgrounds are used */
​
ul.leaders {
    padding: 0;
}
ul.leaders li {
    display: table;
}
ul.leaders li span {
    display:     table-cell;
}
ul.leaders li span:first-child {
  position: relative;
    overflow: hidden;            /* Don't go underneath the price */
}
ul.leaders li span:first-child:after { /* dashes */
    content:        "";
    position:       absolute;
    bottom:         0.5em;       /* Set as you want */       
    margin-left:    0.5em;       /* Keep same for the next span's left padding */
    width:          100%;
    border-bottom:  1px dashed #000;
}
ul.leaders li span + span {
    text-align:     right;
    width:          1%;          /* Trick it */
    vertical-align: bottom;      /* Keep Price text bottom-aligned */
    padding-left:   0.5em;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
roXonpro
0viewers