Summary with pseudo-element
<ul> | |
<li><a href="#" data-page="1">Lorem ipsum</a></li> | |
<li><a href="#" data-page="4">Delectus, sint</a></li> | |
<li><a href="#" data-page="5">Vel, illo</a></li> | |
<li><a href="#" data-page="8">Dolorem, excepturi</a></li> | |
<li><a href="#" data-page="11">Ab, reprehenderit</a></li> | |
<li><a href="#" data-page="13">Ipsum, adipisci</a></li> | |
<li><a href="#" data-page="17">Cumque, totam</a></li> | |
<li><a href="#" data-page="20">Incidunt, alias</a></li> | |
<li><a href="#" data-page="21">Itaque, necessitatibus</a></li> | |
<li><a href="#" data-page="25">Quidem, qui</a></li> | |
</ul> |
ul { | |
width: 60%; | |
margin: auto; | |
padding: 0; | |
list-style: none; | |
} | |
li { | |
margin: .5em 0; | |
} | |
a { | |
display: flex; | |
flex-flow: row nowrap; | |
align-items: baseline; | |
text-decoration: none; | |
transition: color .2s ease-in-out; | |
&::before { | |
height: .1em; | |
flex: 1 1 auto; | |
order: 1; | |
background: left bottom / contain repeat-x url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDIiPjxjaXJjbGUgZmlsbD0iI2ZmZiIgY3g9IjMuNSIgY3k9IjEiIHI9IjEiLz48L3N2Zz4=); | |
content: ''; | |
} | |
&::after { | |
order: 2; | |
content: 'p.' attr(data-page); | |
} | |
&:hover, | |
&:focus { | |
color: black; | |
} | |
} | |
/* misc */ | |
html, body { height: 100%; } | |
body { display: flex; background: #3498db; color: white; font: 1.5em/1.4 "lato"; font-weight: 300; } | |
a { color: inherit; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment