鼠标放上去的下划线

<p class="underline">下划线_啊_下划线</p>

<div>
	<input type="text" />
	<span></span>
</div>

<style type="text/css">
	.underline{
		display: inline-block;
		position: relative;
		line-height: 2;
	}
	.underline::after{
		content:'';
		position: absolute;
		left:0;
		bottom:0;
		transform: scaleX(0);
		width: 100%;
		height: 2px;
		transform-origin: 50% bottom;
		background: #1395ba;
		transition: transform 1s;
	}
	.underline:hover::after{
		transform: scaleX(1);
		transition: transform 1s;
	}

/* input下划线样式 */

div {
		position: relative;
		display: inline-block;
	}
	input {
		outline: none;
		border: none;
		background: #fafafa;
	}
	input ~ span {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background-color: #1395ba;
		transform: scaleX(0);
		transform-origin: right center;
		transition: transform 0.3s ease-in-out;
	}

	input:focus ~ span {
		transform: scaleX(1);
		transform-origin: left center;
	}


</style>