Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
/*
NO JS!
*/
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; }
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.