实现hover上去下边框从中间向左右两边分散开

素颜马尾好姑娘i 2022-12-13 14:29 109阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
    .box{
        display:flex;
        margin:0 auto;
        width:500px;
      
    }
    .ui-box {
        text-decoration:none;
        border:none;
        font-family:'Roboto', sans-serif;
        position:relative;
        vertical-align:baseline;
        padding:10px;
        font-size: 25px;
    }
    .bottom-inOutSpread:before,.bottom-inOutSpread:after,.bottom-inOutSpread>
    .ui-border-element:before,.bottom-inOutSpread>.ui-border-element:after {
        content:'';
        position:absolute
    }
    .bottom-inOutSpread:after {
        border-bottom:4px solid #abc145;
        left:51%;
        right:51%;
        bottom:0px;
        -webkit-transition-property:all;
        -moz-transition-property:all;
        -o-transition-property:all;
        transition-property:all;
        -webkit-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
        -moz-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
        -o-transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
        transition-timing-function:cubic-bezier(0, 0.98, 0.51, 0.93);
        -webkit-transition-duration:200ms;
        -moz-transition-duration:200ms;
        -o-transition-duration:200ms;
        transition-duration:200ms;
        -webkit-transition-delay:0s;
        -moz-transition-delay:0s;
        -o-transition-delay:0s;
        transition-delay:0s
    }
    .bottom-inOutSpread:hover:after {
        left:0%;
        right:0%
    }
    .bottom-inOutSpread:not(:hover):after {
        -webkit-transition-delay:0s;
        -moz-transition-delay:0s;
        -o-transition-delay:0s;
        transition-delay:0s
    }
        </style>
    </head>
    <body>
        <div class="box">
            <a href='' class='ui-box bottom-inOutSpread'>首页</a>
            <a href='' class='ui-box bottom-inOutSpread'>课程中心</a>
            <a href='' class='ui-box bottom-inOutSpread'>理论训练</a>
            <a href='' class='ui-box bottom-inOutSpread'>仿真实训</a>
        </div>
    </body>
    </html>