How Can I Create Leading Dots in CSS for a Table of Contents?

Creating Leading Dots in CSS

In the realm of web design, it is often necessary to display leading dots in tables of contents to guide the reader's eye. One effective method to achieve this using CSS is presented in the provided link: https://www.w3.org/Style/Examples/007/leaders.en.html.

Here's the CSS snippet:

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

This CSS solution utilizes a technique called "character boxing" to display dots without any images or other dependencies. By using a series of white space characters separated by dots as the content of a pseudo-element, it creates the illusion of leading dots on the left-hand side of the list items. Additionally, the CSS applies white backgrounds to the first child span and all subsequent spans to visually separate them.

By implementing this CSS in your project, you can create tables of contents with clean and uniform leading dots, enhancing the overall readability and user experience.

The above is the detailed content of How Can I Create Leading Dots in CSS for a Table of Contents?. For more information, please follow other related articles on the PHP Chinese website!