css 关于链接的前瞻性基础

Posted 2021-05-13

/*progressive underlying*/
.menu a{
	position:relative;
}
 
.menu a:before{
	content:"";
	position:absolute;
	width:100%;
	height:1px;
	bottom: 0;
	left:0;
	background-color: var(--yellow);
	visibility: hidden;
	transform: scaleX(0);
	transition : all 0.5s ease-in-out 0s;
}
 
.menu a:hover:before{
	visibility: visible;
	transform: scaleX(1);
}