Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS responsive multiline list with dashed lines (name - - - price)

Tags:

html

css

I'm trying to figure out how to make a multi-line dot leader when the background is textured or you don't know the background. The W3C site provides a good example when you know the background color, but that doesn't work for my needs. Here is a SO example of a textured background that works really well, but the leaders disappear when the line breaks to a 2nd line. Unfortunately the two use a different method to achieve this effect, so I'm not sure the best way to combine the best of both worlds here...

Here's sorta what I'm thinking. Is it possible?

example

like image 455
Jeff Avatar asked Mar 30 '15 21:03

Jeff


1 Answers

Something from the top of my mind:
(Honestly I don't know for any other better and responsive solution):

CSS dashed list multiline leader

jsBin demo (so you can resize and play with)

  • Place 2 span (as table-cell) inside a LI set as table
  • Trick the last span to width: 1%;
  • Add the desired dashes or dots or even a background-image to the first span's :after pseudo element

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 { /* TITLE */
  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 {     /* PRICE */
  text-align:     right;
  width:          1%;           /* Trick it */
  vertical-align: bottom;       /* Keep Price text bottom-aligned */
  padding-left:   0.5em;
  /* white-space: nowrap;       /* Uncomment if needed */
}
<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>
like image 191
Roko C. Buljan Avatar answered Oct 25 '22 17:10

Roko C. Buljan