【css】虹色のborderを二重に作る

hoge

出来上がったもの。↓

borderを虹色にする術がなかったので、疑似borderを作成し、それを虹色に配色。
途中までは虹色で、後半は透過させてぼやかしてみた。

CSS

h2{
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
h2::before{
	position: absolute;
	content: '';
	box-sizing: border-box;
	width: 100%;
	height:1px;
	left: 0;
	bottom: 5px;
	background:-webkit-gradient(linear, left top, right bottom, from(rgba(235,97,1,0.5)),color-stop(0.3, rgba(220,203,24,0.5)),color-stop(0.5, rgba(74,72,142,0.5)),color-stop(0.8, transparent), to(transparent));
	background:-moz-linear-gradient(left, rgba(235,97,1,0.5),rgba(220,203,24,0.5), rgba(74,72,142,0.5),transparent);
	background:linear-gradient(left, rgba(235,97,1,0.5),rgba(220,203,24,0.5), rgba(74,72,142,0.5), transparent);
}
h2::after{
	position: absolute;
	content: '';
	box-sizing: border-box;
	width: 100%;
	height:2px;
	left: 0;
	bottom: 0;
	background:-webkit-gradient(linear, left top, right bottom, from(rgba(235,97,1,0.5)),color-stop(0.3, rgba(220,203,24,0.5)),color-stop(0.5, rgba(74,72,142,0.5)),color-stop(0.8, transparent), to(transparent));
	background:-moz-linear-gradient(left, rgba(235,97,1,0.5),rgba(220,203,24,0.5), rgba(74,72,142,0.5),transparent);
	background:linear-gradient(left, rgba(235,97,1,0.5),rgba(220,203,24,0.5), rgba(74,72,142,0.5),transparent);
}

HTML

<h2>昼</h2>