纯css3鼠标滑过从中间向两边扩散效果

        利用伪类实现从中间到两边的一个效果，其实这个效果是视觉误差造成产生的，当我们鼠标滑过的时候我们给的值为left：0，width：100%当我们把transiton属性去掉的话，这个效果就是left ：0和width：100%同时进行达到慢慢的展开造成了从中间向两边的展开效果。

先上效果图

style.css

<style type="text/css">
*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#box{
    margin-top: 50px;
}
#box ul{
    background: #d62f2f;
    text-align: center;
    box-shadow: 0 0 19px 0px #a0a0a0;
}
#box ul li{
    position: relative;
    padding: 20px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    font-family: cursive;
    cursor: pointer;
    color: #fff;
}
#box ul li:after{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    height: 2px;
    background: #3c2d2d;
}
#box ul li:hover:after{
    left: 0;
    transition: all 1s;
    width: 100%;
}
</style>

index.html

<div id="box">
    <ul>
        <li>网站制作</li>
        <li>前端分享</li>
        <li>seo优化</li>
        <li>搜索引擎优化</li>
    </ul>
</div>