在CSS中创建前导点

Question

用CSS在目录中做前导点的好方法是什么？

例：

Link.............Chapter 1

Link.............Chapter 2

Link.............Chapter 3

Answer 1

以@Nico O的答案为基础，不需要非语义.dots元素。.toc li {&nbsp; display: flex;}.toc li .title {&nbsp; order: 1;}.toc li .chapter {&nbsp; order: 3;}.toc li::after {&nbsp; content: "";&nbsp; border-bottom: 1px dotted;&nbsp; flex-grow: 1;&nbsp; order: 2;}<ul class="toc">&nbsp; <li>&nbsp; &nbsp; <span class="title">Foo</span>&nbsp; &nbsp; <span class="chapter">Chapter 1</span>&nbsp; </li>&nbsp; <li>&nbsp; &nbsp; <span class="title">Bar</span>&nbsp; &nbsp; <span class="chapter">Chapter 2</span>&nbsp; </li></ul>我们利用这样的事实，即我们可以根据需要对flex容器的子项进行排序，以及伪元素的行为类似于定义它的子项。关键是flex-grow规则。一flex-grow的1，而所有其他的兄弟姐妹都默认0将增长到即使它没有任何内容的剩余空间。这将一直有效，直到.title和.chapter元素一起填满所有空间。然后，::after伪元素将具有widthof，0并且即使边框.title和.chapter将包装其内容，虚线边框也不会显示。因此，如果您确定不会发生这种情况，并且您的观众使用的是现代浏览器，那么这可能是最佳的解决方案。如果您想要更稀疏的点，则可以在伪元素上使用径向渐变作为背景，而不是使用border-bottom：.toc li::after {&nbsp; background-image: radial-gradient(circle, currentcolor 1px, transparent 1px);&nbsp; background-position-y: bottom;&nbsp; background-size: 1ex 3px;&nbsp; background-repeat: repeat-x;&nbsp; height: 1em;}