Using Dot Leaders For A Food Menu With Flex *follow-up

This is a follow-up from: Using dot leaders for a food menu with bootstrap grids I'm creating a food menu using the grid column system with bootstrap 3, and I've created dot leader

Solution 1:

One way would be to use a pseudo element to draw the dots instead, wrap your text in an element that gives it a background color that matches the page background, and position the dots underneath that element with the background color.

.dots {
  display: flex;
  position: relative;
}

.dotsspan {
  background: white;
  padding: 015px00;
}

.dots::after {
  white-space: nowrap;
  overflow: hidden;
  direction: rtl;
  content: "";
  border-bottom: 1px dotted black;
  position: absolute;
  bottom: 5px;
  left: 0; right: 0;
  z-index: -1;
}

<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" /><divclass="container"><divclass="row"><divclass=" col-xs-6 "><pclass="item dots"><span>Cheese</span></p><pclass="item dots"><span>White</span></p><pclass="item dots"><span>Special</span></p><pclass="item dots"><span>Whole Wheat</span></p><pclass="item dots"><span>Silician</span></p><pclass="item dots"><span>Silician Special</span></p><pclass="item dots"><span>Chicago Style</span></p></div><divclass="col-xs-2"><pclass="item">$8.99</p><pclass="item">$9.99</p><pclass="item">$13.50</p><pclass="item">$13.50</p><pclass="item">$13.50</p><pclass="item">$13.50</p><pclass="item">$13.50</p></div><divclass="col-xs-2"><pclass="item">$11.99</p><pclass="item">$12.99</p><pclass="item">$15.99</p><pclass="item">$12.99</p><pclass="item">$12.99</p><pclass="item">$12.99</p><pclass="item">$12.99</p></div><divclass="col-xs-2"><pclass="item">$12.99</p><pclass="item">$13.99</p><pclass="item">$17.99</p><pclass="item">$13.99</p><pclass="item">$15.99</p><pclass="item">$20.00</p><pclass="item">$14.99</p></div></div></div>