css - 在 CSS 中创建前导点

Question

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

例子:

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

Answer 1

这是我为这一期的点前导找到的最好的纯 CSS 解决方案:

http://www.w3.org/Style/Examples/007/leaders.en.html

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>

CSS2/CSS3

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
}

示例: https://codepen.io/ykessler/pen/PoaYGYG

We create the dot leaders with a ‘:before’ pseudo-element attached tothe LI elements. The pseudo-element fills the whole width of the listitem with dots and the SPANs are put on top. A white background on theSPANs hides the dots behind them and an ‘overflow: hidden’ on the ULensures the dots do not extend outside the list.

I used an arbitrary 80 dots, which is enough to fill about 38em, hencethe maximum width on the list.