Elenco multilinea reattivo CSS con linee tratteggiate (nome - - - prezzo)

Question

Sto cercando di capire come creare un puntatore a più righe quando lo sfondo è strutturato o non si conosce lo sfondo. Il sito W3C fornisce uno good example quando si conosce il colore di sfondo, ma ciò non funziona per le mie esigenze. Here is a SO example di uno sfondo con texture che funziona davvero bene, ma i leader scompaiono quando la linea si rompe in una seconda linea. Sfortunatamente i due usano un metodo diverso per ottenere questo effetto, quindi non sono sicuro che il miglior modo di combinare il meglio di entrambi i mondi qui ...

Ecco come sto pensando. È possibile?

Answer 1

Qualcosa dalla parte superiore della mia mente:
_{(Onestamente non so per nessun altro meglio e reattivo soluzione):}

jsBin demo (so you can resize and play with)

• Place 2 span (come table-cell) all'interno di una LI insieme come table
• Trick ultima campata per width: 1%;
• Aggiungere i trattini o punti desiderati o addirittura background-image una al primo span ' s :after pseudo elemento

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>