<style>
    .overlay-figure {
        position: relative;
        display: table;
    }
    .overlay-figure
    .separator {
        display: block;
        height: 3px;/*线的高度*/
        width:100%;/*线的宽度*/
        background-color: #000000;
        -webkit-transform: scaleX(0) translateZ(0);
        -moz-transform: scaleX(0) translateZ(0);
        transform: scaleX(0) translateZ(0);
        -webkit-transition: -webkit-transform 0.25s ease 0.25s;
        -moz-transition: -moz-transform 0.25s ease 0.25s;
        transition: transform 0.25s ease 0.25s;

    }
    .top1 a{
        font-family: 微软雅黑;
        color:#fff;
        font-size:14px;
    }
    .overlay-figure:hover
    .separator {
        -webkit-transform: scaleX(1) translateZ(0);
        -moz-transform: scaleX(1) translateZ(0);
        transform: scaleX(1) translateZ(0);
    }
</style>

<meta charset="utf-8"/>
<!--三个按钮的动画开始-->
<div class="overlay-figure" style="display: inline;">
    <div class="over_a" style="display: inline;">
        <a href="http://www.mamicode.com/#">了解更多</a>
    </div>
    <!--<div class="over_a" style="display: inline">-->
    <!--观看视频-->
    <!--</div>-->
    <div class="separator" style="display: inline-block;position: absolute;top:22px"></div>
</div>
<!--三个按钮的动画结束-->

关于文字下方线消失的动画