利用css3伪类实现鼠标移入悬停让背景颜色从中间向两边逐渐延伸展开

示例代码

<ul>
	<li>
		<div class="text"><p>测试的文字1</p></div>
	</li>
	<li>
		<div class="text"><p>测试的文字2</p></div>
	</li>
</ul>
<style>
li{height:30px;line-height:30px;background:#ddd;position:relative;list-style:none;width:300px;padding:0px 10px;text-align:center;}
li .text:before {content: '';position: absolute;left: 50%;width: 0;height: 100%;background-color: #023793;transition: all 0.5s;}
li .text p{z-index:1;position:relative;}
li:hover .text:before {width: 100%;left: 0;}
li:hover .text p{color:#fff;}
</style>