在CSS中创建前导点

Question

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

例：

Link.............Chapter 1
Link.............Chapter 2
Link.............Chapter 3

Answer 1

摘自这篇有关CSS的领导者点的

字段标签包裹在div中，该div具有在x方向上重复应用的小点图像作为背景。仅此一项将导致点在文本下方流动。因此，为消除这种影响，文本本身会被包裹在一个跨度中，在该跨度中，背景色设置为与包含元素的背景色匹配。

这是CSS：

 .dots {
   background: url('dot.gif') repeat-x bottom;
 }
 .field {
   background-color: #FFFFFF;
 }

要将其应用于示例表单，只需将其用作：

 <div class="dots">
     <span class="field">LastName</span>
 </div>

堆栈片段中的演示

.dots {

  background: url('https://i.stack.imgur.com/otJN0.png') repeat-x bottom;

}

.field {

  background-color: #FFFFFF;

}

.link {

  width: 150px;

  display: inline-block;

}


<div class="row">

  <div class="dots link">

      <span class="field">Link</span>

  </div>

  <span class="chapter">

      Chapter 1

  </span>

</div>



<div class="row">

  <div class="dots link">

      <span class="field">Link</span>

  </div>

  <span class="chapter">

      Chapter 2

  </span>

</div>



<div class="row">

  <div class="dots link">

      <span class="field">Link</span>

  </div>

  <span class="chapter">

      Chapter 3

  </span>

</div>