Create leading dots in CSS

by

This is the best CSS-only solution I have found for this issue of dot leaders:

http://www.w3.org/Style/Examples/007/leaders.en.html

HTML

<ul class="leaders">
 <li><span>Salmon Ravioli</span> <span>7.95</span></li>
 <li><span>Fried Calamari</span> <span>8.95</span></li>
 <li><span>Almond Prawn Cocktail</span> <span>7.95</span></li>
 <li><span>Bruschetta</span> <span>5.25</span></li>
 <li><span>Margherita Pizza</span> <span>10.95</span></li>
</ul>

CSS2/CSS3 

ul.leaders {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none
}

ul.leaders li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
}

ul.leaders span:first-child {
padding-right: 0.33em;
background: white
}

ul.leaders span + span {
float: right;
padding-left: 0.33em;
background: white
}

We create the dot leaders with a ‘:before’ pseudo-element attached to
the LI elements. The pseudo-element fills the whole width of the list
item with dots and the SPANs are put on top. A white background on the
SPANs hides the dots behind them and an ‘overflow: hidden’ on the UL
ensures the dots do not extend outside the list.

I used an arbitrary 80 dots, which is enough to fill about 38em, hence
the maximum width on the list.

More Related Contents:

  1. Working with CSS in React [closed]
  2. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  3. Override body style for content in an iframe
  4. Hiding the scroll bar on an HTML page
  5. CSS3 background image transition
  6. Is there a CSS selector by class prefix?
  7. Understanding z-index stacking order
  8. Position Relative vs Absolute?
  9. Why does the order of media queries matter in CSS?
  10. Truncating long strings with CSS: feasible yet?
  11. CSS to set A4 paper size
  12. Remove padding from columns in Bootstrap 3
  13. Why does `overflow:hidden` prevent `position:sticky` from working?
  14. Style disabled button with CSS
  15. What’s the difference between `all: unset` and `all: revert’
  16. Slanted Corner on CSS box
  17. rotate3d shorthand
  18. How to specify an element after which to wrap in css flexbox? [duplicate]
  19. How to link a CSS file from HTML file?
  20. Build list of selectors with LESS
  21. Changing an input’s HTML5 placeholder color with CSS does not work on Chrome
  22. how to rotate text left 90 degree and cell size is adjusted according to text in html
  23. Set div height equal to screen size
  24. Styling the new twitter widget (embedded timeline)
  25. What CSS3 features still need vendor prefixes?
  26. How to fix unexpected column order in bootstrap 4?
  27. How to stretch children to fill cross-axis?
  28. What is the difference between pseudo-classes and pseudo-elements?
  29. How to fade the edge of a div with just CSS? [duplicate]
  30. How to properly introduce a light/dark mode in Bootstrap?

Leave a Comment