CSS で目次の先頭のドットを作成するにはどうすればよいですか?

CSS での先頭のドットの作成

Web デザインの領域では、ガイドとして目次に先頭のドットを表示することが必要になることがよくあります。読者の目。 CSS を使用してこれを実現する効果的な方法の 1 つが、提供されたリンクに示されています: https://www.w3.org/Style/Examples/007/leaders.en.html.

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

この CSS ソリューションは、「キャラクター ボックス」と呼ばれる技術を利用して、画像やその他の依存関係を持たずにドットを表示します。擬似要素のコンテンツとしてドットで区切られた一連の空白文字を使用すると、リスト項目の左側に先頭のドットがあるかのような錯覚が生じます。さらに、CSS は、最初の子スパンと後続のすべてのスパンに白い背景を適用して、それらを視覚的に分離します。

この CSS をプロジェクトに実装することで、先頭にクリーンで均一なドットを備えた目次を作成でき、内容が強化されます。全体的な読みやすさとユーザーエクスペリエンス。

以上がCSS で目次の先頭のドットを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。