Summary with pseudo-element

index.html

<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>

script.js

/*
	NO JS!
*/

style.scss

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; }

styles

<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" />

summary-with-pseudo-element.markdown

Summary with pseudo-element

A Pen by Twikito on CodePen.

License.