How to Create a Table of Contents with Leading Dots Using Only CSS?

Creating Leading Dots for Table of Contents in CSS

In creating a table of contents, it's often desirable to use leading dots to create a structured and visually appealing layout. Here's an effective CSS-only solution to achieve this:

CSS:

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;
}

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>

This code creates a flexible and visually pleasing table of contents with leading dots. The content is dynamically sized, ensuring consistent spacing regardless of the length of the text.

The above is the detailed content of How to Create a Table of Contents with Leading Dots Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!