<p>This is some example text. This is a <a href="#">normal link</a>, and this is a <a href="#" class="underline">flashy link</a> using pseudo styles.</p>
.underline {
	text-decoration: none;
	position: relative;
}

.underline:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	z-index: -1;
	height: 12px;
	width: 100%;
	background: yellow;
	transition: background 0.5s;
}

.underline:hover:after {
	background: orange;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.