利用伪元素和css3实现鼠标移入下划线向两边展开效果

html代码


css样式
#underline{
    width: 200px;
    height: 50px;
    background: #ddd;
    margin: 20px;
    position: relative;
}

css样式
#underline:before,
#underline:after{
	content: "";/*单引号双引号都可以，但必须是英文*/
	width: 0;
	height: 3px; /*下划线高度*/
	background: blue; /*下划线颜色*/
	position: absolute;
	top: 100%;
	left: 50%;
	transition: all .8s ; /*css动画效果，0.8秒完成*/
}

css样式 
#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/
	left:0%; 
	width:50%;
}
#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/
	left: 50%; /*这句多余，主要是为了对照*/
	width: 50%;
}

css代码
#underline:after{
	content: "";
	width: 0;
	height: 5px;
	background: blue;
	position: absolute;
	top: 100%;
	left: 50%;
	transition: all .8s;
}
#underline:hover:after{/*原理是left:50%变成0%的同时，宽度从0%变成100%*/
	left: 0%;
	width: 100%;
}