<div class="container">
	<h1>This is, a one line title</h1>
</div>

<div class="container">
	<h1>This is,<br> another title</h1>
</div>

body {
	background: #101010;
	
	.container {
		margin-top: 40px;
	}
	
	h1 {
		font-size:45px;
		color: #fff;
		display: inline;
		position: relative;
		padding-bottom: 3px;
		padding-left: 10px;
		padding-right: 10px;
		background-image: linear-gradient(transparent 60%, #E03634 40%);
  	background-repeat: repeat-x;
		background-size: 200% 100%;
		transition: background-size 1s ease;
		
		&:hover {
			background-position: -100% 0;
		}
	}
}