hover显示下划线.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hover显示下划线</title>
	<style type="text/css">
		
	* {
		margin: 0px;
		padding: 0px;

	}
	a {
		    background-color: transparent;
	}
	.hover-style {
		position: relative;
	    overflow: hidden;
	    color: #ff4081;
	    text-decoration: none;
	    outline: 0;

	}

	.hover-style:hover:before {
	    -webkit-transform: scaleX(1);
	    transform: scaleX(1);
	}

	.hover-style:before {
	    position: absolute;
	    top: auto;
	    bottom: -2px;
	    left: 0;
	    width: 100%;
	    height: 1px;
	    content: ' ';
	    background-color: #ff4081;
	    -webkit-transition: all .2s;
	    transition: all .2s;
	    -webkit-transform: scaleX(0);
	    transform: scaleX(0);
	    -webkit-backface-visibility: hidden;
	    backface-visibility: hidden;
	}
	</style>
</head>
<body>
	<a class="hover-style">hover我啦</a>
</body>
</html>