<ol>
	<li>
		<ul>
			<li>
				<a href="#">
					<div><span>Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1 Chapter 1</span></div>

					<div>1</div>
				</a>
			</li>
			<li>
				<a href="#">				
					<div><span>Item 1</pan></div>
					<div>10</div>
				</a>
			</li>
			<li>
				<a href="#">				
					<div><span>Item 2</pan></div>
					<div>8888</div>
				</a>	
			</li>			
		</ul>
	</li>

	<li>
		<ul>
			<li>
				<a href="#">
					<div><span>Chapter 2</span></div>

					<div>1</div>
				</a>
			</li>
			<li>
				<a href="#">				
					<div><span>Item 1</pan></div>
					<div>10</div>
				</a>
			</li>
			<li>
				<a href="#">				
					<div><span>Item 2</pan></div>
					<div>8888</div>
				</a>	
			</li>			
		</ul>
	</li>

</ol>

//Inspired by: https://css-tricks.com/a-perfect-table-of-contents-with-html-css/

/* font */
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);

body {
	margin: 0;
	padding: 15px;
	background-color: green;
	
}

ol {
	position: relative;
	margin: 0px;
	min-width: 240px;
	padding: 15px;
	padding-left: 30px;

	font-family: arial, 'Roboto Mono', serif;
	font-size: 1em;
	font-weight: bold; //make everything, including numbers, bold
	color: blue; //overall color for table of contents
	
	background-color: white;
	
	& li > ul { //adjust space between number and text
		margin-left: -15px;
	}

	& > li {
		padding-left: 15px;
		
	}
	
} //ol

ul, li {
	margin: 0;
	padding: 0;

}

ol li li {
	list-style: none;
	width: 100%;
	margin-bottom: 2px;
	
	& a {	
		position: relative;
		width: 100%;
		display: inline-grid;
		grid-template-columns: 1fr auto;
		text-decoration: none;
		margin-top: 0px;
		margin-bottom: 2px;		
		
		&:hover {
			text-decoration: underline;
					
			//uncomment if you want an underline to show 
	
			/*
			&::before { //full width horizontal line
				position: absolute;
				top: calc(100% - 3px);
				z-index: 20;
				content: '';
				width: 100%;
				height: 1px;
				background-color: blue;
				
			} //&::before
			*/
			
			
		} //&:hover
		
		&:focus {
			outline-style: dashed;
			outline-color: blue;
			outline-offset: 3px;
			
		}	
		
		&::after {
			content: '';
			width: 100%;
			min-width: 50px;
			height: 1em;
			position: absolute;
			z-index: 0;
			bottom: -.2em;
			
			background-color: white;
			background-image: radial-gradient(blue 12%, transparent 12%);
			background-position: 1.5em 0em;
			background-repeat: repeat-x;
			background-size: 0.5em 1em; //change the 0.5em to adjust horizontal spacing	
			
					
		} //&::after
		
	} //a
	
	& a div:nth-of-type(1)  { //title
		& span {
			position: relative;
			z-index: 10;
			background-color: white;
			padding-right: .25em;
		}

	} //title	
	
	&:first-of-type { //first title, adjacent to numbering
		font-style: italic;
		font-size: 1em; //changing this still works acceptably well
	}

	&:not(:first-of-type) { //all but first item
		font-weight: normal;
		
	}	
	
	& a div:nth-of-type(2)  { //page number
		position: relative;
		z-index: 10;
		background-color: white;
		display: flex;
		align-items: flex-end;
		font-style: normal;
		padding-left: 0.25em;
		
	} ////page number		

} //ol li li

//no js was harmed in the making of this pen