Roman Pagination

index.html

<div class="roman-pagination">
	
	<label class="roman-radio">
		<input type="radio" name="radioName" checked>
		<span class="numeral">I.</span>
		<span class="title">The First</span>
	</label>
	
	<label class="roman-radio">
		<input type="radio" name="radioName">
		<span class="numeral">II.</span>
		<span class="title">The Second</span>
	</label>
	
	<label class="roman-radio">
		<input type="radio" name="radioName">
		<span class="numeral">III.</span>
		<span class="title">The Third</span>
	</label>
	
	<label class="roman-radio">
		<input type="radio" name="radioName">
		<span class="numeral">IV.</span>
		<span class="title">The Fourth</span>
	</label>
	
	<label class="roman-radio">
		<input type="radio" name="radioName">
		<span class="numeral">V.</span>
		<span class="title">The Fifth</span>
	</label>
	
</div>

roman-pagination.markdown

Roman Pagination

A Pen by Michael Sveistrup on CodePen.

License.

style.scss

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.roman-pagination {
	width: 400px;
	height: 300px;
	background-color: #F1F1F1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.roman-radio {
	margin: 0 8px;
}

input[type="radio"] { display: none; }
input[type="radio"]:checked ~ span { color: red; }
input[type="radio"]:checked ~ .title { display: inline; margin-left: 0; }

.numeral {
	
}

.title {
	display: none;
	margin-left: -16px;
}