文字の下に線

文字の下にアンダーライン
文字分だけ色をつける

h1 {
	position: relative;
	overflow: hidden;
	&::before,
	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		width: 100%;
		border-bottom: 1px solid;
	}
	&::before {
		border-bottom-color: red;
	}
	&::after {
		border-bottom-color: #ccc;
	}
}