css给数字或文字在鼠标悬停时添加下划线动画

效果图：

html 代码：

<h1 class="row center " style="font-size: 2em;">css给数字或文字在鼠标悬停时添加下划线动画</h1>
<div class="row center text"><span class="span_style">春有百花秋望月</span>，<span class="span_style">夏有冷风冬听雪</span>。</div>
<div class="row center text"><span class="span_style">心中若无烦心事</span>，<span class="span_style">便是人生好时节</span>。</div>

css代码：

<style lang="scss" scoped>
	.text {
		margin: 16px;
		font-weight: 600;
		letter-spacing: 2px;
		font-family: '楷体';

		.span_style {
			font-size: 18px;
			cursor: pointer;
			margin-right: 4px;
			background: linear-gradient(to right, #55aaff, #aa55ff, #ffaa00) no-repeat right bottom;
			/*即下划线（背景图）在默认情况下宽度为0 */
			background-size: 0 2px;
			/* 设定过度时间 */
			transition: background-size 1000ms;

		}

		span:hover {
			/* 悬停 下划线的横向滑动位置为左 */
			background-position-x: left;
			/* 设定下划线宽度为100%展示 */
			background-size: 100% 2px;
		}
	}
</style>