Comment créer une table des matières avec des points principaux en utilisant uniquement CSS ?

Création de points de début pour la table des matières en CSS

Lors de la création d'une table des matières, il est souvent souhaitable d'utiliser des points de début pour créer un mise en page structurée et visuellement attrayante. Voici une solution efficace uniquement en CSS pour y parvenir :

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>

Ce code crée une table des matières flexible et visuellement agréable avec des points de début. Le contenu est dimensionné dynamiquement, garantissant un espacement cohérent quelle que soit la longueur du texte.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!