Result

本の目次っぽい見た目のリスト。

css

.chapters li {/*リスト基本設定*/
  font-size: 1.25em;
  list-style: none;
  line-height: 1.125;
}

.chapters a {
  font-weight: bold;
  border: 0;
}

.chapters a, .chapters time {/*左右を半々にする*/
  display: inline-block;
  width: 50%;
  vertical-align: baseline;
  margin-top: 0.33em;
}

.chapters time {/*一方を右寄せにする*/
  text-align: right;
  font-style: italic;
}

.chapters li:after {/*リストに疑似要素を追加、block要素とし、*/
  content: '';
  display: block;
  height: 0;
  border-top: 3px dotted;/*dottedで点線を引き、*/
  position: relative;
  bottom: 0.4em;
  left: 3px;
  right: 5px;
  z-index: -1;/*z-indexで後面に配置にする*/
}

span {/*背景を同色にして点線の重なりを消す*/
  background: #ffffcc;
  padding: 0 0.3em 0 0;
}

time span {
  padding: 0 0 0 0.3em;
}

html

<ul class="chapters">
  <li><a href="#"><span>fooとは</span></a><time> <span>2017.8.14</span></time></li>
  <li><a href="#"><span>barとは</span></a><time> <span>2017.8.15</span></time></li>
  <li><a href="#"><span>fooと暮らすという事</span></a><time> <span>2017.10.15</span></time></li>
    .
    .
    .
</ul>

via

Bookish