<h1>foo bar 大全</h1>
<p>— By anonymous —</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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.