リストを本の目次のような見た目にする
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 {
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;
}
|
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
