css 底部动画 | transition | 从中间开始

底部动画（基于vue3）

效果图

demo

<template>
    <div class="box">
        <div class="line"></div>
    </div>
</template>

<style lang="scss" scoped>
.box{
    width: 100px;
    height: 100px;
    margin: 50%;
    background-color: aqua;
    position: relative;
    .line{
        width: 0%;
        height: 2px;
        left: 50%; 
        position: absolute;
        top: 98px;
        border-bottom: 2px rgb(19, 120, 228) solid;
        transition: all 0.2s ease-in-out;
    } 
}
.box:hover  .line{
    width: 100%;
    left:0;
}

</style>