用css3制作章节目录，章节编号在左，章节名称在右，中间用点填充

使用CSS3可以轻松创建一个简洁美观的章节目录样式，通常通过`<ul>`和`<li>`标签结合伪元素`:before`和`:after`来实现。以下是一个简单的示例：

HTML结构：

<ul class="chapter-list">
  <li>
    <a href="#section1">第1章</a>
    <span>标题1</span>
  </li>
  <li>
    <a href="#section2">第2章</a>
    <span>标题2</span>
  </li>
  <!-- 更多章节... -->
</ul>

CSS样式：

.chapter-list {
  list-style-type: none;
  padding-left: 0;
}

.chapter-list a {
  display: inline-block;
  position: relative;
  margin-right: 20px; /* 根据需要调整间距 */
}

.chapter-list a:before {
  content: attr(data-chapter); /* 假设数据属性用于存储章节编号 */
  position: absolute;
  left: 0;
  width: 30px; /* 章节编号宽度 */
  text-align: right;
  border-right: 1px solid #ccc; /* 边框线 */
  padding-right: 5px;
}

.chapter-list span {
  display: block;
}

在这个例子中，你需要给每个`<a>`元素添加一个`data-chapter`属性来存储章节编号，例如 `data-chapter="1"`。然后，通过CSS选择器`:before`插入一个由`:content`属性动态生成的内容。