导航hover效果

<a href="##">菜单</a>

//兼容IE9以上

a{

    display: inline-block;

    padding: 3px 12px;

    text-decoration: none;

    position: relative;

}

a:before{

    content: "";

    position: absolute;

    transition: all .2s ease-in-out;

    left: 50%;

    right: 50%;

    bottom: 0;

    border-bottom: 5px solid red;

}

a:hover::before{

    left: 0;

    right: 0;

    border-bottom-color: #009a61;

}