There is a block with services and prices. enter image description here

How to impose such a block) I just can not think of ...

  • one
    Looks like a table, is set up like a table. - VostokSisters

2 answers 2

Maybe there is a more beautiful way, I do not know.

.row { display: flex; width: 100%; max-width: 400px; position: relative; } .row:after { content: ''; display: block; width: 100%; height: 1px; left: 0; bottom: 4px; border-bottom: 1px dotted black; position: absolute; z-index: -1; } .td { background: white; padding: 0 5px; } .td:nth-child(2) { margin-left: auto; } 
 <div class="row"> <div class="td">Сантехника</div> <div class="td">300 гр</div> </div>

  • Does flex work in all browsers? - Evgeniy Mikhalichenko
  • from ie10 +, ios 7, etc. - DimenSi
  • Thank you very much)) - Evgeniy Mikhalhenko
  • Do not forget to use prefixes. - DimenSi

Make a fill of dots, then block it with another fill of white color:

 .info { background: url("https://i.stack.imgur.com/9ZGVR.png") repeat-x left 68%; padding: 0; } .info>span { padding: 0 5px 0 0; background: #fff; } 
 <table width="100%"> <tr> <td class=info> <span>Мозги кита</span> </td> <td>3000 P</td> </tr> </table>

  • Not very cool looking. On my monitor, a part of the cropped "dot" is visible. It is best to impose this as a table of 2 columns, the last one is of a fixed width, and for each of the first cells in the pseudo-element in the 'content' field specify many points, and overflow to put the hidden. Too lazy to realize, besides the questions "write the code for me" are often disliked, strange. - VostokSisters