在CSS中创建前导点

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

例如：

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

---

摘自以下文章：

字段标签被包装在一个div中，该div有一个在x方向重复应用的点的小图像作为背景。仅此一点就可以使点在文本下流动。因此，为了消除这种效果，文本本身被包装在一个范围内，其中背景颜色被设置为与包含元素的背景颜色相匹配

以下是CSS：

.dots{
背景：url（'dot.gif'）重复-x底部；
}
.场{
背景色：#FFFFFF；
} 

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

姓氏

下面是一张用于圆点的图像：

堆栈片段中的演示

.dots{
背景：url（'https://i.stack.imgur.com/otJN0.png'）重复-x底部；
}
.场{
背景色：#FFFFFF；
}
.链接{
宽度：150px；
显示：内联块；
}

链接
第一章
链接
第二章
链接
第三章

这是我为这一问题找到的最好的CSS解决方案：

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>

我们创建带有“：before”伪元素的点引线 黎族元素。伪元素填充列表的整个宽度 带有点和跨距的项目放在顶部。屏幕上的白色背景 跨距隐藏了它们后面的点和UL上的“溢出：隐藏” 确保点不会延伸到列表之外

我使用了一个任意的80点，这足以填充大约38em，因此 列表上的最大宽度

---

实际上，W3C有一个工作草案，描述您正在寻找的功能

---

早在2005年，一家名为List Apart的公司就为此发表了一篇文章。（）不幸的是，它似乎对我不起作用，我也没有找到更多。但也许值得记住的是，在不久的将来，有一天只使用CSS是可能的：）

我混合了几个例子来创建我认为非常好的解决方案。不依赖背景色来隐藏引线点。也在IE8上工作

项目12.234
另一个项目1000.25

ul.li{clear:两个；}
李斯潘：第一个孩子{
浮动：左；
填充：0.4em0；
保证金：0；
}
ul.li span+span{
浮动：对；
填充：0.4em；
保证金：0；
}
李：之后呢{
内容：“；
显示：块；
溢出：隐藏；
高度：1米；
边框底部：1个点；
}

可以将感谢与flexbox的喜悦结合起来

例如，这里有一种替代方法。 演示：

.article{
显示器：flex；
}
.第条.项目，
.物品.价格{
弹性：10自动；
}
.文章.点{
flex:01自动；
/*允许隐藏太长的内容*/
溢出：隐藏；
}
.点：：之前{
显示：块；
空白：nowrap；
溢出：隐藏；
文本溢出：剪辑；
内容：
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . . . "
}

三明治烤面包机
$35

基于的，不需要非语义的

.dots

元素

.toc li{
显示器：flex；
}
.toc li.标题{
顺序：1；
}
李国章{
顺序：3；
}
.toc li：：之后{
背景图像：径向渐变（圆形，currentcolor 1px，透明1.5px）；
背景位置：底部；
背景尺寸：1ex 4.5px；
背景重复：空间不重复；
内容：“；
柔性生长：1；
高度：1米；
顺序：2；
}

福
第一章


酒吧
第二章

.圆点 { 显示：内联块； 宽度：325px； 空白：nowrap； 溢出：隐藏！重要； 文本溢出：省略号； }

---

以下是我的方法，使用带点边框样式的元素，而不是图像或内容，使其灵活，并将其放在“链接”和“章节”之间

.toc{
宽度：500px；
}
.行{
弯曲方向：行；
显示器：flex；
}
.柔性圆点{
边框顶部样式：虚线；
边框顶部宽度：1px；
最大高度：1px；
边缘顶部：0.5em；
}
.柔性圆点vcenter{
弯曲方向：行；
显示器：flex；
}
[灵活版]{
弹性：1；
}

链接1
第一章
链接20
第二十章
链接300
第300章

我参加聚会迟到了，但我们最近不得不在工作中这样做，结果我使用了这样一个模块：

使用

li.dot引线的标记

<ul class="is-no-padding">
    <li class="dot-leader">
        <span class="dot-leader__left">Pizza</span>
        <span class="dot-leader__right">$100</span>
    </li>
</ul>

<dl class="dot-leader">
    <dt class="dot-leader__left">Pizza</dt>
    <dd class="dot-leader__right">$100</dd>
</dl>

许多这种css黑客在transtarent背景下无法工作，或者很难工作。您可以使用现代的flex和背景渐变来绘制虚线（它看起来更光滑，然后是表虚线）。
像这样：


。联系人行{
显示器：flex；
宽度：500px；
}
.圆点{
显示：块；
背景：径向梯度（圆形，rgba（0,0,0,62）1px，透明1px）重复-x；
背景尺寸：20px28px；
弹性增长：10；
}

电邮：
test@email
电话：
测试电话
点引线可以在没有跨距或类的情况下完成。这是一个针对HTML表格的响应性解决方案，修改为垂直居中点引线：


其他的解决方案都不适合我。以下是我的解决方案：


考虑父div的宽度
不使用不允许动态环境的白色背景技巧
不使用点的图片，因此点可以始终与其他字体颜色匹配
两全其美
.dot
{
    display: inline-block;
    width: 185px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.dot-leader {
    position: relative;
    overflow: hidden; /* clip the dots */
}

.dot-leader__left {
    position: relative;
    display: inline-block;
}

.dot-leader__left::after {
    color: gray;
    content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
    font-weight: normal;
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    margin-left: 5px; /* space left of dots */
}

.dot-leader__right {
    background: white; /* cover the dots */
    display: inline-block;
    position: absolute;
    right: 0;
    padding-left: 5px; /* space right of dots */
}

<ul class="is-no-padding">
    <li class="dot-leader">
        <span class="dot-leader__left">Pizza</span>
        <span class="dot-leader__right">$100</span>
    </li>
</ul>

<dl class="dot-leader">
    <dt class="dot-leader__left">Pizza</dt>
    <dd class="dot-leader__right">$100</dd>
</dl>

table {
    width: 90%;
    margin:100px auto;
    table-layout:fixed;
    border-collapse: collapse;
    }

td {
    padding:1em 0 0 0;
    vertical-align:bottom;
    }

td span{
    background-color:#fff;
    }

td:first-child {
    text-align: left;
    font-weight: 700;
    overflow: hidden;
    position: relative;
    }

td:first-child::after {
    content: '';
    position: absolute;
    bottom: .4em;
    width:1500px;
    height:0px ;
    margin-left: 1em;
    border-bottom:2px dotted grey;
}

td:last-child {
    text-align:right;
    width:3em;
    }

<div class="main">

  <p>Example # 1</p>

  <div class="container">
    <div class="row">
      <span>$150</span><span class="dots"></span><span>remaining credit</span>
    </div>
    <div class="row">
      <span class="spacer"></span><span>30</span><span class="dots"></span><span>remaining days</span>
    </div>
  </div>

  <p>Example # 2</p>

  <div class="container">
    <div class="row">
      <span>Food Item #1</span><span class="dots"></span><span>$12.95</span>
    </div>
    <div class="row">
      <span>Food Item #22</span><span class="dots"></span><span>$7.95</span>
    </div>
  </div>

</div>

.main {
  /* to prove it respects width of outer containers */
  width: 320px;
}

.row {
  display: flex;
}

.dots {
  /* shorthand - flex: 1 1 auto */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;

  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
 }

 .dots:before {
   content:
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . "
    ". . . . . . . . . . . . . . . . . . . . ";
}

 .row span:first-child,
 .row span:last-child {
   /* shorthand - flex: 0 0 auto */
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
 }

.row span:first-child {
   padding-right: 0.33em;
}

 .row span:last-child {
   padding-left: 0.33em;
 }

 .spacer {visibility: hidden}
 .spacer:before {content: "$"}

ul{
    padding: 0;
    overflow-x: hidden;
    margin:0 0 24pt;
    list-style: none;
    list-style-type:none;
}
ul li{
    background:white;
}
ul li:nth-child(odd){
    background:lightgrey;
}
ul li:before {
    float:left;
    width:0;
    white-space:nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . ";
}
ul span:first-child {
    padding: 0 0.33em 0 0.8em;
    background:inherit;
}
ul span + span{
    float: right;
    padding: 0 0.8em 0 0.33em;
    background:inherit;
}