在CSS中创建前导点

Question

用CSS在目录中做前导点的好方法是什么？例：Link.............Chapter 1Link.............Chapter 2Link.............Chapter 3

Answer 1

以@Nico O的答案为基础，不需要非语义.dots元素。

.toc li {

  display: flex;

}

.toc li .title {

  order: 1;

}

.toc li .chapter {

  order: 3;

}

.toc li::after {

  content: "";

  border-bottom: 1px dotted;

  flex-grow: 1;

  order: 2;

}

<ul class="toc">

  <li>

    <span class="title">Foo</span>

    <span class="chapter">Chapter 1</span>

  </li>

  <li>

    <span class="title">Bar</span>

    <span class="chapter">Chapter 2</span>

  </li>

</ul>

我们利用这样的事实，即我们可以根据需要对flex容器的子项进行排序，以及伪元素的行为类似于定义它的子项。关键是flex-grow规则。一flex-grow的1，而所有其他的兄弟姐妹都默认0将增长到即使它没有任何内容的剩余空间。

这将一直有效，直到.title和.chapter元素一起填满所有空间。然后，::after伪元素将具有widthof，0并且即使边框.title和.chapter将包装其内容，虚线边框也不会显示。因此，如果您确定不会发生这种情况，并且您的观众使用的是现代浏览器，那么这可能是最佳的解决方案。

如果您想要更稀疏的点，则可以在伪元素上使用径向渐变作为背景，而不是使用border-bottom：

.toc li::after {

  background-image: radial-gradient(circle, currentcolor 1px, transparent 1px);

  background-position-y: bottom;

  background-size: 1ex 3px;

  background-repeat: repeat-x;

  height: 1em;

}