<h1>foo bar 大全</h1>
<p>&mdash; By anonymous &mdash;</p>
<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>
  <li><a href="#"><span>barと向き合う為に</span></a><time> <span>2017.10.16~10.17</span></time></li>
  <li><a href="#"><span>fooとbarの愛の物語</span></a><time> <span>fin</span></time></li>
</ul>


* {
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: baseline;
}

body {
  font-size: 125%;
  font-family: serif;
  line-height: 1.33;
  font-weight: normal;
  max-width: 30em;
  margin: 1.33em auto;
  background: #FFFFCC;
}

* + * {
  margin-top: 1.33em;
}

h1, h2 {
  text-align: center;
  font-family:  serif;
  font-weight: normal;
  line-height: 1;
}

h1 {
  font-size: 3em;
}

li {
  margin-top: 0;
}

a {
  text-decoration: none;
  border-bottom: 1px solid;
  color: #000;
}

.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 {
  content: '';
  display: block;
  height: 0;
  border-top: 3px dotted;
  position: relative;
  bottom: 0.4em;
  left: 3px;
  right: 5px;
  z-index: -1;
}

span {
  background: #ffffcc;
  padding: 0 0.3em 0 0;
}

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

h1 + p {
  margin-top: 0;
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.