<h1>Hover to animate!</h1>

@import url(https://fonts.googleapis.com/css?family=Courier+Prime);

$h: .125em;

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: grid;
	place-content: center;
	height: 100vh;
	background: url(https://images.unsplash.com/photo-1484313544071-4d67c88b99be?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ) 50%/ cover;
    overflow-x: hidden;
}

h1 {
	position: relative;
	font: 900 9vw 'Courier Prime';
	color: rgb(21, 15, 19);
  cursor: pointer;

	&::before,
	&::after {
		position: absolute;
		top: calc(50% - .5*#{$h});
    left: 0;
		width: 0%;
		height: $h;
    transition: width 1s ease;
		content: '';
	}

	&::before {
		z-index: -1;
		background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0 1ch, crimson 0 2ch);

	}

	&::after {
		background: repeating-linear-gradient(90deg, crimson 0 1ch, rgba(0, 0, 0, 0) 0 2ch);
	}

	&:hover::before,
	&:hover::after {
    width: 100%;
	}
}

/*
 * https://css-tricks.com/weaving-a-line-through-text-in-css/#comment-1754792
 */