Header Underline Experiment

dabblet.css

/**
 * Header Underline Experiment
 */
 
 body {
 	margin: 0;
 	font: 1rem/1 Arial, sans-serif;
 }

.test {
	font-size: 3rem;
	color: #000;
	float: left;
	margin: 1rem 0 0 20%;
	border-bottom:0.125rem solid;
	
}

.test a {
	border-bottom:0.125rem solid;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease-in-out;
	position: relative;
}

.test a:hover {
	color: hsla(0,75%,50%,1);
}

.test a:after {
	content: "";
	position: absolute;
	background-color: hsla(0,75%,50%,1);
	width: 100%;
	height: 
	0.125rem;
	left: 0;
	top: 3rem;
}

dabblet.html

<h2 class="test"><a href="#">Test Header</a></h2>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}