动画：下划线左右伸缩

直接上图，即鼠标进入导航栏的某个选项时，出现下划线，但下划线具有伸缩动画，所以不显单调。（我不知道怎么弄动图（；´д｀）ゞ）

代码如下，是从中间向两边伸缩，还是从左往右，都可以自己修改。

从中间向两边

		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 100px;
			height: 50px;
			background-color: black;
			padding: 20px;

		}
		p{	
			height: 50px;
			line-height: 50px;
			text-decoration-line: none;
			color: white;
			/*以上修饰，下面正文*/
			position: absolute;
		}
		p:before{
			content: "";
			width: 0;
			border-bottom: 4px solid white;
			position: absolute;
			bottom: 0;
			left: 50%;
			transition: all linear 0.2s;
		}
		p:hover:before{
			left: 0;
			width: 100%;
		}

从左边向右边移动

		p:before{
			content: "";
			width: 0;
			border-bottom: 4px solid white;
			position: absolute;
			bottom: 0;
			left: 0;
			transition: all linear 0.2s;
		}
		p:hover:before{
			left: 0;
			width: 100%;
		}