Line of dots between items

Question

Restaurant web site and menu. I need to get \"line of dots\" between menu item and price. I need to get it without writing dots manually one by one. This feature should work aut

Answer 1

.text-div {
  background-image: linear-gradient(to right, #000 10%, rgba(255, 255, 255, 0) 0%);
  background-position: 0 14px;
  background-size: 10px 1px;
  background-repeat: repeat-x;
  width: 100%;
  height:25px;
}

.text-span {
  background: #fff;
  padding-right: 10px
}

.pull-right {
  float: right;
  padding-left: 10px
}

  

    

      Item:
      $125.00
    
  
  

    

      Very long name of the item:
      $20.00
    
  
  

    

      Not long name:
      $30.00