<h1><span>Jello is a squishy fellow</span></h1>		
h1 {
	max-width: 300px;
	
	span {
		width: 100%;
		background-image: linear-gradient(
			to bottom,
			rgba(172, 106, 172, 0) 50%,
			rgba(172, 106, 172, 1) 50%,
			rgba(172, 106, 172, 1) 60%,
			rgba(172, 106, 172, 0) 60%,
		);
		background-size: 0 100%;
		background-repeat: no-repeat;
		transition: 250ms linear;
	}

	// Demo animation
	span:hover {
		background-size: 100% 100%;
	}
}

// Make it pretty
html { height: 100%;}
body {
	background: #c8c0d5;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: rgba(172, 106, 172, 1);
	font-family: 'Righteous', cursive;
	font-size: 2rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.